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

Question

所以我有一个带有列和最大高度的flexbox,使列在3列中彼此相邻.

这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度.

我在这里举了一个例子:

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

div {
  flex-basis: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Chrome和Safari中的结果将在下方进行屏幕截图.

铬:

苹果浏览器:

这似乎是一个明显的错误,但我找不到任何有关它的信息.

我想知道的是:

1. 这有什么变通方法吗？和
2. 有没有被报道为bug？

Answer 1

如关于flexbox的Safari问题的另一个答案所述，由于flex相对较新（CSS3），因此并非所有浏览器都能按预期运行。在某些浏览器中，根据所应用属性的组合，部分或完全不支持弹性布局。

在这种情况下，Safari只是拒绝max-height: 400px在flex容器上进行确认。但是，如果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;
}

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;
}

要记住的另一件事是column wrap具有许多错误的Flex布局。这可能是当今Flexbox中漏洞最多的区域。这是另外两个示例：

• 当flexbox项目以列模式包装时，容器的宽度不会增加
• Flexbox：当flex-direction：列，flex-wrap：wrap时，宽度计算错误