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; useautoinstead. - Set explicit widths with fixed values or
calc()instead of relying on percentage-basedflex-basis. - Set
flex-shrink: 0where needed and test overflow settings (visibleorhidden) 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 withheight: autoor 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: 1differently than Chrome. - If layout breaks, try setting
flex-shrink: 0explicitly 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 toauto. - 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: VisibleorHiddendepending 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.
