Demo page has a flexbox height bug in Safari 9.x (OS X, iOS)

[opattison]

Spotted in Safari OS X 9.0.1 on OS X. On narrower views (below 48em, I believe), the grid collapses vertically, creating a visual bug. This is caused by how Safari handles flex: 0 0 100%. Setting this to flex: 0 0 auto should fix this behavior, but more cross-browser testing is needed since Chrome, Firefox and others may treat this differently (although I believe my fix should work, so do test it out). flex-basis: 100% is the issue here. Note that 100% works for horizontal (row) but fails for vertical (column) flex layouts in Safari. auto (the default value for flex-basis) negates the issue for either flex-direction.

I have run into this issue on multiple other sites. I've looked at the spec and I'm not yet entirely sure whether Safari has it right or wrong.

Let me know if you want more testing or a PR.

[IonicaBizau]

That's a nice catch, @opattison! ✨
Yes, test it on other browsers and if it works, would be happy to accept a pull request regarding this fix! 😄

It's funny that 100% and auto have same length, so, the size will not be modified. 😁

[opattison]

I believe this is a currently unresolved flex bug in Safari. I have a really brief fix that will address the issue – making a PR now. I hope this solution will work. I think it is necessary to support iOS and OS X Safari users, which is a pretty big target.

[opattison]

IE 11 failed with this flex bug in exactly the same way – my fix in #8 addresses both equally.

[IonicaBizau]

Fixed in 1.2.0, thanks to you! 👍 👏

[tavax]

Allways not working on Safari OSX