Flexbox not working properly in Safari 9

Safari 9 is supposed to fully support flexbox, according to caniuse.com

I encounter bug where flexbox is semi-working, without any -webkit prefix in Safari 9. But the width calculation is off. The boxes are aligned as instructed by flex rules. But the width are becoming 0 + margin + border + padding. No width is allocated for inner nodes or inner text, resulting in the inner content coming out.

By trial and error, turns out that you need to set either one of width, min-width, max-width. Any one of it will make it behave. Seems a bug in Safari 9. This does not manifest in newer version of Safari

Written on July 9, 2017