👀 Views: 208 💬 Answers: 1 📅 Created: 2025-06-11

css flexbox safari

I've been struggling with this for a few days now and could really use some help. I'm working with an scenario with a Flexbox layout where items aren't aligning correctly in Safari (version 16.1)... I have a container with three child items, and I'm trying to center them both vertically and horizontally. However, in Safari, the items seem to stack vertically instead of aligning next to each other. Here’s the code I’ve been using: ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .item { width: 100px; height: 100px; background-color: #007bff; margin: 10px; } ``` ```html <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> ``` When I test this in Chrome and Firefox, everything works perfectly, but in Safari, the items seem to ignore the `justify-content` and `align-items` properties. I’ve tried adding `flex-direction: row;` explicitly, but it didn’t help. I also checked for any CSS resets that might be affecting the layout, but nothing seems to be interfering. To troubleshoot, I added a border to the `.container` to see if it was rendering properly, and it displays as expected. However, the child items remain misaligned. Has anyone experienced a similar scenario or have suggestions on how to ensure proper alignment across browsers, particularly in Safari? For context: I'm using Css on Ubuntu. For reference, this is a production web app. Could this be a known issue?