If Flex Content on iOS Ignores Width

2018-05-29 | #css, #ios, #solution, #webdev

I just came across this great flex bug, which currently is not even documented by our lovely flexbug list (see links):

If you have a flex element containing text without whitespace, the element may ignore its width on iOS9+ and force the whole body to get wider than 100%.

Setting the elements width/max-width or text operations such as word-wrap: break-word; only result in strange behaviour, but do not solve the problem. The element behaves as if it does only half know that it's supposed to be a certain width, but rather works with the text's or content's inherent rendering width.

After fiddling for an hour or two, I came up with the idea, that somehow the flex calculations to not keep in mind, that percent settings on elements should default to the viewport width if no other context is provided, so a chain of nested elements with percent widths <= 100% should not grow beyond the viewport. And this is exactly what Safari seems to be lacking there, so we have to provide a fixed max-width for the body/document itself.

body {

width: 100%;

max-width: 100vw;

}

seems to do the trick.