I ran into an interesting issue recently with CSS Flexible Box Layout and Apple’s iOS Safari (latest version) – and the issue only occurs on iOS Safari.
Let’s say you have a parent element with a display: flex;. And let’s say some children elements of this parent element also use display: flex;. These children elements also use vw/vh measurements for min/max width.
And iOS Safari seems to have issues with this – the layout, for some child elements, went bizarre and iOS Safari seemed to add extra margin to the right pushing the main content in.
So far the only workaround I got is to detect (via Modernizr) if it’s an iOS device and change my css from display: flex; to display: inline-block;. It’s not perfect, there’s some things I’d love to figure out better. But for now it does the job.
Addendum: Apparently this is a known (and as yet) unfixed bug: https://bugs.webkit.org/show_bug.cgi?id=136041