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 中的结果截屏如下。

铬：

Safari：

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

我想知道的是：

1. 是否有任何解决方法？和
2. 是否已报告为错误？

Answer 1

正如another answer about Safari problems with flexbox 中所述，由于 flex 相对较新 (CSS3)，并非所有浏览器都能按预期工作。在某些浏览器中，部分支持或完全不支持 flex 布局，具体取决于您应用的属性组合。

在这种特殊情况下，Safari 只是拒绝确认弹性容器上的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;
}

body {
    display: flex;
    max-height: 400px;
}
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}
div {
  height: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div style="height:200px"></div>
  <div></div>
  <div></div>
  <div></div>
</section>

要记住的另一件事是column wrap 的弹性布局有很多错误。它可能是当今 flexbox 中 bug 最多的地方。这里还有两个例子：

• When flexbox items wrap in column mode, container does not grow its width
• Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap