Member Avatar for appsglobal

Ever had a layout that looks perfect in Chrome, but the moment you open it in Safari… everything falls apart?
Yeah. Same here

It’s not your code (well… not always). Safari just handles Flexbox a little differently.

Here’s what usually causes the issue

Safari is stricter
Chrome is forgiving. Safari wants things spelled out - widths, heights, and flex values.

Flex shorthand can be risky
flex: 1 works fine in Chrome, but Safari often prefers the full version:
flex: 1 1 auto

Height matters more than you think
If the parent doesn’t have a clear height, align-items: center may fail in Safari.

Prefixes still matter
Older Safari versions still need -webkit- Flexbox prefixes.

min-height bugs are real
min-height: 100vh inside flex containers can behave oddly in Safari. Sometimes height: 100vh is safer.

Lesson learned:
Always test in Safari early. Don’t trust Chrome alone

If your Flexbox layout is acting weird on Safari, you’re not doing anything “wrong” — you just need to be more explicit.

Have you hit this issue before? Let’s suffer together in the comments

  • 3 Contributors
  • 2 Replies
  • 98 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Yoruba45
rproffitt commented: Thanks for this. Another place I check is caniuse.com +17
Member Avatar for sanjay_63

Flexbox often works in Chrome but not Safari because Safari is stricter and has more layout quirks.

Member Avatar for Yoruba45

Flexbox can behave differently in Safari because it’s stricter than Chrome. Safari often requires explicit widths, heights, and full flex values (flex: 1 1 auto). Parent heights matter, older versions may need -webkit- prefixes, and min-height: 100vh can be unreliable. Always test in Safari and be explicit with your layout rules.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.