Webflow answer

Why does my flexbox grid display properly in Chrome, but not in Safari on tablet and mobile?

TL;DR

Avoid using min-height: 100% on flex children and nested percent-based heights; use auto instead.
Set explicit widths with fixed values or calc() instead of relying on percentage-based flex-basis.
Set flex-shrink: 0 where needed and test overflow settings (visible or hidden) in Webflow.
Replace 100vh with 100% or JS fallback due to Safari’s buggy viewport unit handling.

Your flexbox grid not displaying properly in Safari on tablet and mobile is likely due to differences in how Safari handles flexbox, especially on iOS and iPadOS.

1. Check for Known Safari Flexbox Bugs

iOS Safari has a history of bugs with flex-wrap, especially when using min-height, height: 100%, and nested flex containers.
On certain iOS versions, children inside a wrapped flex container can collapse or display incorrectly.

2. Avoid `min-height: 100%` on Flex Children

If any flex items or containers inside your grid use min-height: 100%, try replacing it with height: auto or removing it altogether.
In Safari, min-height: 100% can behave inconsistently on flex children and cause layout issues.

3. Use Explicit Widths on Flex Items

For responsive layouts, avoid relying solely on flex-basis percent values.
Set fixed pixel values or use calc() for widths where Safari miscalculates fractional percentages.

4. Check `flex-shrink` and `flex-grow` Values

Safari sometimes treats flex-shrink: 1 differently than Chrome.
If layout breaks, try setting flex-shrink: 0 explicitly on items that should not compress.

5. Avoid Nested Percent-Based Heights

If you have nested flex containers, and the inner ones use height: 100% or % values, remove them or set them to auto.
Safari has difficulty computing nested percentage heights without an explicit fixed height on the ancestor.

6. Test Without Webflow's Auto "vw/vh" Units

Webflow often uses viewport units (vw/vh) which behave differently on iOS (due to the address bar appearing/disappearing).
Consider changing height settings that use 100vh to 100% or use a JS fallback if needed.

7. Enable Overflow Fixes in Webflow

In Webflow Designer, go to the parent flex container and try setting Overflow: Visible or Hidden depending on layout needs.
Safari sometimes clips flex content incorrectly with overflow misconfigured.

Summary

Your layout likely breaks in Safari due to its known flexbox inconsistencies—especially with min-height, nested percentage heights, and flex-wrap handling. Adjust these styles and avoid relying solely on CSS that behaves inconsistently in WebKit engines. Always test flex-based layouts on real devices when targeting iOS/iPadOS Safari.

Webflow templates Webflow inspiration