首頁  >  文章  >  web前端  >  為什麼「height: 100%」不適用於 Chrome 中的 Flexbox 列子項目?

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

Susan Sarandon
Susan Sarandon原創
2024-11-09 02:06:02167瀏覽

Why Doesn't `height: 100%` Work on Flexbox Column Children in Chrome?

高度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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn