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

Question

这是剧集框的结构。 cat $1 | tr "\n" "|" | grep -o '<reportBody>.*</reportBody>' | sed 's/\(<reportBody>\|<\/reportBody>\)//g' | sed 's/|/\n/g' | sed '/^\s*$/d' | base64 -d $2 > $2 适用于剧集类的div。

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

以下是代码，带嵌套和自动添加前缀的简单PostCSS：https://gist.github.com/Connorelsea/897cf41f7b9e43bdce43

在Safari上呈现：

在Firefox上呈现：

Answer 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有正确的选项）

Answer 2

Safari 10.0.1中已修复此问题。似乎这是旧版Safari（v9）中的一个错误以及它们如何处理flexbox。