以下是根據您的文章的一些標題選項，請記住問題格式： 一般性問題和重點問題： * 為什麼`overflow-wrap:break-word`會導致Flexbox中出現捲軸？ * F

Flexbox 對溢位換行行為的影響

在 CSS 中，overflow-wrap:break-word 屬性指示瀏覽器將長字分成多行。然而，當與 display: flex 屬性結合使用時，此行為變得不可預測。

問題：

如提供的程式碼片段所示，當display: flex 為加入到有overflow-wrap：break-word的元素時，會出現水平捲軸。這種行為源於這樣一個事實：Flexbox 項目的自動最小寬度為 auto，導致它們擴展以容納其內容。

解：

要消除水平捲軸，將受影響的 Flexbox 子項的 min-width 屬性設為 0。這可以防止元素擴展超出其自然大小，從而允許長內容在可用寬度內換行。

修改的程式碼:

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

.b {
  min-width: 0; /* ADDED */
}

此修改可確保 .b 中的長內容按預期換行，而不會導致水平捲軸。

以上是以下是根據您的文章的一些標題選項，請記住問題格式： 一般性問題和重點問題： * 為什麼`overflow-wrap:break-word`會導致Flexbox中出現捲軸？ * F的詳細內容。更多資訊請關注PHP中文網其他相關文章！