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

Flexbox：在Internet Explorer 中忽略最小高度

嘗試在Internet Explorer (IE) 中使用標準化Flexbox 術語實現標準化Flex 容器時在標準化Flex 容器時在標準化Flexbox在版本10 和11 中，使用者可能會遇到指定的min-height 屬性被忽略的問題。這可能會導致意外的行為，因為容器高度不受最小值限制。

問題：

具有兩個子 div 的 Flex 容器會表現出意外的高度行為在IE中。子 div 的高度小於 400px，但容器的 min-height 屬性 400px 被忽略，導致容器無法擴展以容納 justify-content: space- Between 屬性。這可以防止第一個子 div 與頂部對齊，以及第二個子 div 與底部對齊。

解決方案：

要在 IE 10 和 中解決此問題11、需要讓flex容器本身成為一個flex item。這可以透過在程式碼中加入以下 CSS 來實現：

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

透過將 body 元素設為 Flex 項目，容器 div 繼承了 Flexbox 屬性並正確遵循 min-height 屬性。

修訂後的範例：

有彈性項目修復的更新程式碼可在修訂後的版本中找到小提琴：

<div>

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