為什麼「height: 100%」在 Chrome 的 Flexbox 欄位中無法如預期運作？

Flexbox 欄位中的高度問題：Chrome 怪癖

在Flexbox 欄位中，使用高度百分比調整子元素大小時可能會遇到困難。此問題源自於 Chrome 在處理 Flexbox 規範時的一個怪癖。

考慮以下範例：

<div class="flexbox">
  <div class="flex">
    <div class="flex-child"></div>
  </div>
  <div class="static"></div>
</div>

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
}

.flex-child {
  background: red;
  height: 100%;
  width: 100%;
  display: block;
}

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

您會預期紅色 .flex-child 元素佔據其藍色 .flex 父級的整個高度。但是，height:100% 無法如預期運作。

解決方案：

要解決此問題：

1. 修改 .flex顯示：flex。
2. 從 .flex-child 移除 height:100%。

此調整可確保 .flex-child 填充 .flex 中的整個空間。

技術背景：

在flexbox中，align-self:stretch（預設）決定了彎曲元素的橫向尺寸屬性（這裡是高度）。但是，百分比使用指定的交叉尺寸值，而不是其使用值。在這種情況下，.flex-child 嘗試佔據 .flex 指定高度的 100%，預設為 auto。這會使佈局引擎感到困惑。

將 .flex 設定為顯示：flex 透過覆蓋預設行為並允許更高層級的 CSS 確定 .flex 的大小來解決問題。

例外：

如果您想部分填充 .flex，此解決方案將無法運作。要實現此目的，您可以在 .flex 中新增一個帶有 flex:1 的 .spacer 元素，並將 flex-child 設定為 flex:9 （以及 .flex 上的 flex-direction:column ）。然而，這是一種駭客攻擊，希望未來的瀏覽器更新能解決這個問題。

以上是為什麼「height: 100%」在 Chrome 的 Flexbox 欄位中無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！