Html flex容器的高度在Safari中无法正常工作

因此，我有一个flexbox，其中包含列和最大高度，以使列在3列中彼此相邻

这在Chrome中运行良好，但在Safari中似乎只使用最后一列（最右边）来设置容器的实际高度

我在这里举了一个例子：

部分{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
最大高度：400px；
填充：10px；
边框：1px纯绿色；
}
div{
弹性基准：100px；
宽度：100px；
背景色：红色；
利润率：10px；
}

如中所述，由于flex相对较新（CSS3），并非所有浏览器都能按预期工作。在某些浏览器中，flex布局部分受支持或完全被破坏，具体取决于应用的属性组合

在这种情况下，Safari只是拒绝确认flex容器上的

max height:400px

。但是，如果flex容器没有响应，您可以从父容器获得帮助

这就是您现在所处的位置：

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px; /* not working in Safari */
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}

请尝试以下方法：

body {
    display: flex;
    max-height: 400px;
}
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}

正文{
显示器：flex；
最大高度：400px；
}
部分{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
宽度：400px；
填充：10px；
边框：1px纯绿色；
}
div{
高度：100px；
宽度：100px；
背景色：红色；
利润率：10px；
}

此解决方案似乎有效，谢谢！然而，我仍然想知道它是否被报道为一个错误的地方？caniuse.com显示Safari 9.1和更高版本没有问题，但它显然没有按预期工作。实际上，

column wrap

中的flex容器有几个bug。请看我答案的最后一部分。