父级flexbox容器会忽略子级的flexbox最小宽度

时间：2018-11-08 13:54:55

标签： html css css3 flexbox textwrapping

一段很短的史前时代

我的故事始于努力使overflow-wrap: break-word;在Flexbox中工作。尽管Flexbox容器可能会打断长字，但Flexbox容器不希望其容器收缩。

.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;来缩小其项目：

.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>

但是，现实世界要复杂一些。

问题

在我们的应用程序中，我们有许多嵌套的flexbox。因此，示例应如下所示：

.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的{​​{1}}容器忽略了其子级可以很好收缩的事实。我不明白为什么会这样。你能给我解释一下吗？为什么flexbox-container不尊重其子flexbox flex-column？

我发现的解决方案是将min-width: 0设置为层次结构中的 all 个弹性框，这些弹性框看起来非常骇人且危险，因为我可以在意想不到的地方破坏应用程序布局。 >

1 个答案:

答案 0 :(得分：2)

要了解这一点，只需在项目中添加具有不同颜色的边框，您将看到不同级别的溢出。更重要的是，在添加每个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都将修复一个溢出，允许元素缩小并将溢出移至下一级别。这就是为什么您需要级联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>

相关问题
最新问题