為什麼百分比高度在 Flexbox 欄位中無法如預期運作？

Flexbox 欄位中的百分比高度問題

在 Flexbox 版面中，通常希望 Flexbox 欄位的子項填入其高度。然而，使用者可能會遇到將高度設為百分比卻無法得到預期結果的問題。

說明

根據 Flexbox 規範，元素的跨尺寸屬性（在本例中為高度）使用指定值和使用值。百分比高度是根據父項的指定高度計算的，而不是根據使用的高度。

解決方案

要在 Chrome 中解決此問題：

1. 設定父容器（.flex）顯示：flex。
2. 移除高度： 100%；來自子元素 (.flex-child) 的規則。

範例：

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

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

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

部分填充的替代方法

如果只需要部分填充的替代方法

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

如果只需要填充的一部分，則需要一個額外的Flex 子容器可以新增(.spacer) 來佔用剩餘空間。

結論

透過了解指定值和使用值之間的差異，開發人員可以克服百分比Flexbox 列的高度問題。儘管在某些情況下可能需要特定於瀏覽器的解決方法，但預計規範更新將在未來解決這些限制。

以上是為什麼百分比高度在 Flexbox 欄位中無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！