為什麼「height: 100%」不適用於 Chrome 中的 Flexbox 列子項目？

高度100% 在Flexbox 列子項目上不起作用：瀏覽器特定的錯誤

您遇到的問題是Flexbox 列中的子元素不響應身高百分比。此問題已在 Chrome 中發現，可能不會影響其他瀏覽器。

在您的程式碼範例中：

• .flexbox 設定為顯示為具有列方向的 Flexbox 容器。
• .flex 是彎曲元素。
• .flex-child 是 .flex 內的子元素。

當設定 .flex-child 高度為：100 時%，它無法填充其父級 .flex 的垂直空間。

解決方案：

要解決此問題，請進行以下修改：

• 更改.flex 以顯示為Flexbox： flex. { display: flex; }.
• 從.flex-child 刪除height: 100% 樣式。

此變更將允許 .flex-child 元素填充 .flex 中可用的垂直空間。

說明：

Flexbox 規範規定，align-self:stretch（彎曲元素的預設值）僅影響元素的跨尺寸屬性的使用值（在這種情況下的高度）。但是，百分比是根據父級的 cross-size 屬性的指定值而不是其使用值來計算的。

由於 .flex 沒有指定高度，因此預設高度為「auto」。當您將 .flex-child 設為 height: 100% 時，Chrome 會根據 .flex 的指定值（即「auto」）計算高度。因此，.flex-child 最終的高度為 0，因為「auto」意味著「根據需要大小」。

透過將 .flex 變更為顯示為 Flexbox，您可以明確地將其 Flex 方向設定為 row 。這允許 .flex-child 按預期正確填充 .flex 的高度。

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