父级flexbox容器忽略子级的flexbox最小宽度 [英] Parent flexbox container ignores child's flexbox min-width
问题描述
我的故事始于努力使 overflow-wrap:break-word; 在Flexbox中工作.尽管Flexbox容器可能会打断长字，但Flexbox容器并不想理解其是否可以收缩:
My story begins with struggling to make overflow-wrap: break-word; working inside a flexbox. Flexbox container didn't want to understand that its item can be shrunk despite the fact that the item can break long words:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex-column {
display: flex;
}
.item {
overflow-wrap: break-word;
background-color: #fff;
padding: 8px;
}<div class="body">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>幸运的是，我们可以帮助flexbox理解它可以使用 min-width:0; 在项目上缩小其项目:
Fortunately, we can help flexbox to understand that it can shrink its item using min-width: 0; on the item:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex-column {
display: flex;
}
.item {
overflow-wrap: break-word;
background-color: #fff;
padding: 8px;
/* Okay, it fixes this */
min-width: 0;
}<div class="body">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>但是，现实世界要复杂一些.
However, the real world is a little bit more complicated.
在我们的应用程序中，我们有许多嵌套的flexbox.因此，示例应如下所示:
In our application, we have many nested flexboxes. So the example should look like this:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
min-width: 0;
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex">
<div class="flex">
<div class="flex">
<div class="flex-column">
<div class="item">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
</div>您可能会看到，我们 flex-column 的 flex 容器忽略了其子级可以很好收缩的事实.我不明白为什么会这样.你能给我解释一下吗?为什么flexbox-container不尊重其子flexbox min-width:0 ?
As you may see, the flex container of our flex-column ignores the fact that its children can shrink very well. I do not understand why is it behaves that way. Could you explain this to me? Why is the flexbox-container doesn't respect its child flexbox min-width: 0?
我找到的解决方案是将 min-width:0 设置为层次结构中的 all 弹性框，这看起来很hacky，很危险，因为我可以破坏应用程序放置在意想不到的地方.
The solution that I've found is to set min-width: 0 to all flexboxes in the hierarchy which looks very hacky and dangerous because I can break our application layout in unexpected places.
推荐答案
要了解这一点，只需在项目中添加具有不同颜色的边框，您将看到在不同级别上都有溢出.更重要的是，在添加每个 min-width 后，我们只有一个溢出正在移至一个较低的杠杆.
To understand this, simply add border with different colors to your items and you will see that you have overflow at different levels. More precesily, we have only one overflow that is moving to a lower lever after adding each min-width.
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;">
<div class="flex" style="border:5px solid blue;">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>每个 min-width 将修复一个溢出，允许元素缩小并将溢出移到下一级别.这就是为什么您需要级联的最小宽度.
Every min-width will fix one overflow, allow the element to shrink and move the overflow to next level. That's why you need a cascading min-width.
添加一个:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex" style="border:5px solid red;">
<!-- adding min-width at this level -->
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>
</div>添加另一个:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<!-- adding min-width at this level -->
<div class="flex" style="border:5px solid blue;min-width:0">
<div class="flex-column" style="border:5px solid yellow;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>再次:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;min-width:0">
<!-- adding min-width at this level -->
<div class="flex-column" style="border:5px solid yellow;min-width:0;">
<div class="item" style="border:5px solid pink;">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>最后一个:
.body {
width: 300px;
border: 1px solid black;
padding: 8px;
background-color: #ccc;
}
.flex {
display: flex;
}
.flex-column {
display: flex;
}
.item {
padding: 8px;
background-color: #fff;
overflow-wrap: break-word;
}<div class="body">
<div class="flex" style="border:5px solid red;">
<div class="flex" style="border:5px solid green;min-width:0;">
<div class="flex" style="border:5px solid blue;min-width:0">
<div class="flex-column" style="border:5px solid yellow;min-width:0;">
<!-- adding min-width at this level -->
<div class="item" style="border:5px solid pink;min-width:0">
This is Spaaaaaaaaaaaaaaaarrrrrrrrrrrrrttttttttttttttaaaaaaaaaaaaaaaaaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get
your example looking how you want it to look. But both values are being rendered correctly.
</div>
</div>
</div>
</div>
</div>
</div>这篇关于父级flexbox容器忽略子级的flexbox最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
