為什麼 IE11 Flex 容器中的文字不換行，如何修復它？

IE11 中的Flex 容器換行問題：解決方案和解決方法

使用Flex 容器對齊文字元素時，我們發現文字中Chrome 和IE11 中的換行行為有所不同。具體來說，在 IE11 中，Flex 容器內的文字無法換行，導致溢出。

已知錯誤和解決方法

這確實是 IE11 中的已知錯誤。若要解決此問題，需要明確指定 Flex 容器內子元素的寬度。將以下CSS 規則加入您的程式碼應該可以解決換行問題：

.child {
  width: 100%;
}

替代解決方法

替代解決方法包括使用flex-basis: 100 % 或flex： 1 在子元素上。這些選項還強制 IE11 了解並尊重 Flex 容器內區塊級子元素的預期全寬佔用。

範例

.child {
  flex-basis: 100%;
}

說明

IE11 需要明確寬度聲明來辨識子元素應佔據父Flex 容器內的全部可用空間。相較之下，即使沒有明確聲明，Chrome 也會表現出預期的換行行為。

以上是為什麼 IE11 Flex 容器中的文字不換行，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！