Flex容器的高度在Safari中无法正常工作 [英] Height of flex container not working properly in Safari
问题描述
所以我有一个flexbox与columns和max-height使列堆叠在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>
Safari：
这似乎是一个明显的错误，但我找不到任何有关它的信息。
我想知道的是：
- ？和
- 是否已报告错误？
如有关使用flexbox的Safari问题的另一个答案所述，因为flex相对较新（CSS3），并非所有浏览器按预期工作。在某些浏览器中，根据您应用的属性组合，部分支持或完全隐藏flex布局。
在这种特殊情况下，Safari只是拒绝确认 max-height：400px 。所以，因为我经常与客户服务，请求与主管说话。如果flex容器没有响应，请转到父级。
这是您现在的位置：
节{
display：flex;
flex-direction：column;
flex-wrap：wrap;
max-height：400px; / *在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>
另一个要记住的是，使用列换行的flex布局有很多错误。这可能是flexbox今天最糟糕的地方。以下是另外两个示例：
- 当flexbox items in column mode，container does not grow its width
- Flexbox：错误flex-direction：column，flex-wrap：wrap 时的宽度计算
So I have a flexbox with columns and max-height to make the columns stack next to each other in 3 columns.
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>
Results in Chrome and Safari are screencapped below.
Chrome:
Safari:
This seems to be an obvious bug, but I can't find any information about it.
What I want to know is:
- Are there any workarounds to this? and
- Has it been reported as a bug?
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.
In this particular case, Safari simply refuses to acknowledge max-height: 400px on the flex container. So, as I often have to do with customer service, ask to speak to a supervisor. If the flex container isn't responding, go to 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;
}
Try this instead:
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>
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:
- When flexbox items wrap in column mode, container does not grow its width
- Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
这篇关于Flex容器的高度在Safari中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
