為什麼「height: 100%」在 Chrome 中的 Flexbox 列子項目上不起作用？

Flexbox 列子元素的高度100% 不起作用：Chrome 問題

在Flexbox 中，預計子元素應填充可用高度:100% 屬性指定。但是，當父元素是 Flexbox 列時，這種行為在 Chrome 中會被破壞。

在提供的範例中，以下程式碼旨在建立Flexbox 欄位佈局：

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

且子元素設定為填入可用高度：

.flex-child {
  height: 100%;
}

但是，在Chrome 中，子元素不會回應高度：100%

解決方案：

可以透過修改以下內容來解決此問題：

1. 設定要顯示的父元素.flex：flex。這是明確指示瀏覽器使用 Flexbox 佈局的關鍵步驟。
2. 從子元素 .flex-child 移除 height: 100% 屬性。這消除了瀏覽器嘗試將百分比值應用於未指定的父高度而造成的混亂。

說明：

Flexbox 嚴格遵循規範。 align-self:stretch 值是彎曲元素的預設值，僅修改 cross-size 屬性的「使用」值（在本例中為高度），而不修改其「指定」值。另一方面，百分比是根據父級的 cross-size 屬性的指定值計算的。

由於 .flex 沒有指定的高度，請嘗試在 .flex 上設定 height: 100%- child 導致 .flex 未指定高度的 100%，這本質上是「自動」。這會導致瀏覽器誤解意圖。

透過將 .flex 設定為 display: flex，我們強制瀏覽器使用 Flexbox 佈局，確保元素佈局正確。此外，刪除 .flex-child 上的 height: 100% 屬性允許元素繼承其父級 .flex 的指定高度。

限制：

而此解決方案適用於填充 .flex 的整個空間，如果僅要填充 .flex 的一部分，則它可能不起作用。在這種情況下，可能需要使用絕對定位或多個 Flexbox 子項的解決方法。

以上是為什麼「height: 100%」在 Chrome 中的 Flexbox 列子項目上不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！