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浏览器：

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

我想知道的是：

这有什么变通方法吗？和
它是否被报告为错误？

Answer 1

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

在这种特殊情况下，Safari只是拒绝在Flex容器上确认max-height: 400px。但是，如果弹性容器没有响应，您可以从父级获得帮助。

这就是你现在所在的地方：

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

＆＃13;

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

＆＃13;

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

＆＃13;

要记住的另一件事是column wrap的flex布局有很多错误。它可能是今天flexbox中最容易出错的区域。以下是另外两个例子：

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

1 个答案: