為什麼在 Flexbox 容器中使用時，「overflow-wrap：break-word」不能如預期運作？

Flexbox 影響Overflow-Wrap 行為

問題：

在換行與display : flex 結合使用時，行為不符合預期？

.wrap {
  overflow-wrap: break-word;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

答案：

當你將 display: flex 加到wrap元素時，它就變成了flexbox容器。預設情況下，Flexbox 容器內的元素在一行中對齊。然而，flexbox 子元素的 min-width 屬性預設為 auto，導致它們佔據容納其內容所需的最小寬度。

在提供的程式碼中，這意味著元素 a 和 b 是拉伸以適應其內容。由於元素 b 的文字內容很長，因此會強制出現水平捲軸。

要解決此問題，可以將元素 b 的最小寬度設為 0。這將允許其縮小以適應其內容並消除水平捲軸。

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

以上是為什麼在 Flexbox 容器中使用時，「overflow-wrap：break-word」不能如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！