Flex 容器的高度在 Safari 中无法正常工作 [英] Height of flex container not working properly in Safari

问题描述

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

So I have a flexbox with columns and max-height to make the columns stack next to each other in 3 columns.

这在 Chrome 中工作正常，但在 Safari 中似乎只使用最后一列(最右边)来设置容器的实际高度.

This works fine in Chrome, but in Safari it seems to only use the last (rightmost) column to set the actual height of the container.

我在这里做了一个例子:

I've made an example here:

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 中的结果如下所示.

Results in Chrome and Safari are screencapped below.

铬:

Safari:

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

This seems to be an obvious bug, but I can't find any information about it.

我想知道的是:

1. 是否有任何解决方法?和
2. 它是否被报告为错误?

推荐答案

如关于 Safari 使用 flexbox 问题的另一个答案，因为 flex 是相对较新的(CSS3)，并非所有浏览器都能按预期工作.在某些浏览器中，部分支持或完全不支持 flex 布局，具体取决于您应用的属性组合.

As stated in another answer about Safari problems with flexbox, because flex is relatively new (CSS3), not all browsers work as expected. In some browsers, flex layout is partially supported or fully botched, depending on the combination of properties you apply.

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

In this particular case, Safari simply refuses to acknowledge max-height: 400px on the flex container. However, if the flex container isn't responding, you can get help from the parent.

这就是你现在所在的位置:

This is where you are now:

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 的 flex 布局有很多错误.这可能是当今 flexbox 中漏洞最多的区域.这里还有两个例子:

Another thing to keep in mind is that flex layout with column wrap has many bugs. It's possibly the most bug-ridden area in flexbox today. Here are two more examples:

• 当 flexbox 项目以列模式换行时，容器不会增加其宽度
• Flexbox:当 flex-direction: column、flex-wrap: wrap 时宽度计算错误

这篇关于Flex 容器的高度在 Safari 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！