Why is this flexbox layout broken in Safari?

问题

So I designed this in CSS, the idea is to have a header and the rest as scrollable content.
(there's a link to a live demo at the bottom)

Alas, in Safari it is broken and looks like this:

As you can see, the height of the header is miscalculated, causing the green box to overflow.

I narrowed down the problem to a wrong calculation of flex-basis of the header. Or so I believe.

Live demo here: http://jsbin.com/zusavefoqu

Any idea how to fix it?

Thanks!

回答1:

You may need to add vendor prefixes.

Currently, flexbox is supported by all major browsers, except IE 8 & 9.

Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

---

Also, it seems like there are two problems with your layout in Safari:

• the header overflow, and
• the vertical scrollbar on #more is missing.

For a list of common flex bugs and their workarounds see this page: Flexbugs.

来源：https://stackoverflow.com/questions/34976604/why-is-this-flexbox-layout-broken-in-safari