👀 Views: 0 💬 Answers: 1 📅 Created: 2025-08-29

css flexbox safari CSS

I'm working on a personal project and I'm working with an scenario with flexbox alignment in Safari 16.1... I have a flex container that is supposed to evenly distribute its child items, but they seem to be collapsing in size when I set a `max-width` on them using percentage values. Here's the relevant CSS: ```css .container { display: flex; justify-content: space-between; width: 100%; } .item { max-width: 30%; flex: 1; padding: 10px; background-color: lightblue; } ``` And the HTML structure looks like this: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` In Chrome and Firefox, everything works as expected, but in Safari, the items are not respecting the `max-width` and are appearing narrower than they should. I tried using fixed widths instead of percentages, and while that seems to resolve the scenario, I would prefer to keep the responsive design. I also checked for any conflicting styles and ensured there are no parent elements affecting the layout, yet the question continues. Any insights on how to resolve this or a workaround that maintains a responsive layout? My development environment is Windows. Has anyone else encountered this?