為什麼我的 Flex 容器的「最小高度」在 Internet Explorer 10 和 11 中被忽略？

Internet Explorer 中Flex 容器被忽視的最小高度

儘管標準化Flexbox 屬性得到了廣泛支持，但Internet Explorer 在 10 和1111以下情況下表現出特殊行為：涉及柔性容器。忽略 min-height 屬性就會出現這樣的問題。

考慮一個包含兩個子 div 的容器 div，每個子 div 的最大高度為 400 像素。利用 CSS flex 屬性， justify-content: space- Between ；旨在均勻分配子 div 之間的垂直空間。然而，這種對齊方式在 Chrome 和 Firefox 中可以完美運行，但在 Internet Explorer 中則不行。

解決方案在於將 Flex 容器本身設定為 Flex 項目。只需新增 display: flex;和彎曲方向：列；對於 body 元素，Internet Explorer 10 和 11 中會考慮容器的 min-height 屬性。這可確保子 div 之間的空間分配正確。

此解決方法解決了特定於 Internet Explorer 版本 10 和 11 的 Flexbox 錯誤，確保現代瀏覽器的行為一致。有關此問題的更多詳細信息，請訪問 https://github.com/philipwalton/flexbugs#flexbug-3。

以上是為什麼我的 Flex 容器的「最小高度」在 Internet Explorer 10 和 11 中被忽略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！