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

Question

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

唉，在Safari中，它已经坏了，看起来像这样：

如您所见，标题的高度计算错误，导致绿框溢出。

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

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

知道怎么解决吗？

谢谢！

Answer 1

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

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

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

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

此外，您的Safari布局似乎有两个问题：

• 标题溢出，
• Bundle-ClassPath: target/classes, **<<<---- here is it !** libs/log4j-1.2.16.jar, libs/slf4j-api-1.6.0.jar, libs/slf4j-log4j12-1.6.0.jar, libs/commons-io-2.4.jar Bundle-Activator: com.senatov.smapperApp.Activator 上的垂直滚动条缺失。

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