高度100% 在Flexbox 列子項目上不起作用:瀏覽器特定的錯誤
您遇到的問題是Flexbox 列中的子元素不響應身高百分比。此問題已在 Chrome 中發現,可能不會影響其他瀏覽器。
在您的程式碼範例中:
當設定 .flex-child 高度為:100 時%,它無法填充其父級 .flex 的垂直空間。
解決方案:
要解決此問題,請進行以下修改:
此變更將允許 .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中文網其他相關文章!