仅在 Safari 上超出父级边界的 Flexbox 子元素答案

【问题标题】：Flexbox child element extending beyond bounds of parent only on Safari仅在 Safari 上超出父级边界的 Flexbox 子元素
【发布时间】：2016-05-01 21:14:05
【问题描述】：

这是剧集框的结构。 display: flex 应用于具有情节类的 div。

h2 没有在 Safari 上扩展以更改其父级的宽度？有什么原因吗？

这里是代码，带有嵌套和自动前缀的简单 PostCSS：https://gist.github.com/Connorelsea/897cf41f7b9e43bdce43

在 Safari 上渲染：

在 Firefox 上渲染：

【问题讨论】：

可能重复：stackoverflow.com/q/34976604/3597276
在所有子元素上将 flex 缩小为 0 可以修复它，但随后会使第二个子元素悬空而不是数字。
我在手机上，所以无法真正测试。如果没有其他人回答，稍后会继续。

标签： html css safari flexbox

【解决方案1】：

我认为，您的问题是 CSS-Flexbox 的跨浏览器支持

试试这个（应该适用于所有浏览器）

.foo {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
 }

（具有正确选项的 Ofc）

【讨论】：

不，这些东西都已被自动前缀插入，但在 Safari 中仍然无法使用它。不过谢谢你的建议！ :)
我会试试的，但我不在家...抱歉，如果您仍然没有答案，请稍后

【解决方案2】：

这已在 Safari 10.0.1 中得到修复。似乎这是旧版本 Safari (v9) 以及它们如何处理 flexbox 中的一个错误。

【讨论】：