爲什麼在Safari中這個flexbox佈局被破壞？

Question

所以我設計了這個在CSS中，這個想法是有一個標題和其餘作爲可滾動的內容。
（有底部的實時演示鏈接）

唉，在Safari它壞了，是這樣的：

正如你所看到的，高度的標題被錯誤計算，導致綠框溢出。

我把問題縮小到頭的錯誤計算flex-basis。或者我相信。

現場演示這裏：http://jsbin.com/zusavefoqu

不知道如何解決它？

謝謝！

Answer 1

您可能需要添加供應商前綴。

目前，flexbox支持所有主流瀏覽器，except IE 8 & 9。

一些最近的瀏覽器版本，如Safari 8和IE10，需要vendor prefixes。

要快速添加所需的所有前綴，請在左側面板中將您的CSS張貼到此：Autoprefixer。

---

而且，好像有兩個問題在Safari佈局：

• 頭溢出，並
• 垂直滾動條上#more丟失。

有關常見彈性錯誤及其變通方法的列表，請參閱本頁：Flexbugs。