為什麼我的 Flex 容器的「min-height」在 IE10 和 IE11 中被忽略？

Flex Container min-height 在 IE 中被忽略

在 IE10 和 IE11 中使用 Flexbox 時，您應該可以使用標準化的 Flex 術語。然而，使用者遇到了一個問題，即這些瀏覽器不尊重 Flex 容器的 min-height 屬性。

指定的 HTML 結構具有一個帶有兩個子 div 的容器 div，每個子 div 都有可變的高度。目標是讓第一個子元素位於頂部，第二個子元素位於底部，它們之間的空間使用 justify-content: space- Between 均勻分佈。

雖然此設定適用於 Chrome 和Firefox，IE 下失敗。 min-height 屬性被忽略，導致容器採用其最高子元素的高度。

解決方案在於解決 IE 渲染 Flexbox 的已知問題。根據 GitHub 的 flexbugs 文件 (https://github.com/philipwalton/flexbugs#flexbug-3)，這些瀏覽器版本在尊重 Flex 容器的 min-height 屬性方面存在問題。

要解決此問題，只需使彈性容器本身成為彈性項目。如下修改 CSS：

body {
   display: flex;
   flex-direction: column;
}

此變更強制包含容器 div 的 body 元素成為 Flex 項目。因此，容器 div 現在在該上下文中被識別為 Flex 子項，並且尊重其 min-height 屬性。

修訂後的 JSFiddle 示範了解決方案，容器現在正確地遵循指定的 min-height .

以上是為什麼我的 Flex 容器的「min-height」在 IE10 和 IE11 中被忽略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！