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

Posted 2023-03-07

【中文标题】为啥这个 flexbox 布局在 Safari 中被破坏了？

【英文标题】：Why is this flexbox layout broken in Safari?为什么这个 flexbox 布局在 Safari 中被破坏了？

【发布时间】：2016-04-30 19:38:08

【问题描述】：

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

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

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

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

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

知道如何解决吗？

谢谢！

【参考方案1】：

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

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

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

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

---

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

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

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

【讨论】：

谢谢，我确实使用了自动前缀。忘记提了。为这个演示简化了

感谢您的链接！尽管您没有立即提供解决方案，但清单上的第一个问题为我解决了！ flex-shrink: 0