为什么这个 flexbox 布局在 Safari 中被破坏了？

Question

所以我在 CSS 中设计了这个，想法是有一个标题，其余部分作为可滚动内容。
（底部有一个现场演示的链接）

唉，在 Safari 中它被破坏了，看起来像这样：

可以看到，header的高度计算错误，导致绿框溢出。

我将问题缩小到错误计算标题的flex-basis。或者我相信。

现场演示：http://jsbin.com/zusavefoqu

知道如何解决吗？

谢谢！

Answer 1

您可能需要添加供应商前缀。

目前，所有主流浏览器都支持 flexbox，except IE 8 & 9。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。

如需快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

---

另外，您在 Safari 中的布局似乎存在两个问题：

• 标题溢出，并且
• #more 上的垂直滚动条丢失。

有关常见 flex 错误及其解决方法的列表，请参阅此页面：Flexbugs。