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

Posted 2023-03-05

【中文标题】flex 容器的高度在 Safari 中无法正常工作

【英文标题】：Height of flex container not working properly in Safari

【发布时间】：2017-01-29 18:25:11

【问题描述】：

所以我有一个带有列和最大高度的 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】：

正如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

【讨论】：

这个解决方案似乎有效，谢谢！但是我仍然想知道它是否在某处被报告为错误？ caniuse.com 显示 Safari 9.1 及更高版本没有问题，但它显然没有按预期工作。

column wrap 中的弹性容器实际上存在几个错误。请参阅我答案的最后一部分。