為什麼我的 Flexbox 列子項目沒有填滿 Chrome 中 100% 的高度？

Flexbox 列子項上的高度100%

您的問題源自於Flexbox 規範中的衝突，這會影響高度百分比的計算方式鉻合金。根據flexbox規範，當align-self設定為stretch（flex元素的預設值）時，它會調整元素的cross-size屬性的使用值（在本例中為高度）。但是，百分比是根據父級的 cross-size 屬性的指定值而不是使用的值進行操作的。

在您的範例中，.flex 元素的 CSS 設定為 flex: 1，這表示它將佔用所有可用空間。 .flex-child 元素的高度設定為 100%，這表示它將佔據 100% 的可用高度（根據 flex 父級的指定高度計算）。但是，.flex 的高度沒有明確設置，因此它預設為 auto。因此，Chrome 將 .flex-child 高度解釋為 auto 的 100%，這就是它沒有填充整個 .flex 元素的原因。

要解決此問題，您需要：

1. 設定.flex顯示：flex；以確保它被識別為彈性容器。
2. 刪除高度：100%；來自 .flex-child 的語句。

這將允許 .flex-child 填充其父 .flex 元素的整個高度。

但是，如果您正在嘗試僅填充 .flex 的一部分。在這種情況下，您需要採用一種解決方法，例如使用 flex: 1 將第二個 .spacer 子級新增至 .flex 並將 .flex-child 設為 flex: 9。雖然這是一個不太優雅的選項，但它是解決問題的一種解決方法規範的特殊性。

值得注意的是，此問題是 Chrome 特有的，在其他瀏覽器中可能不會發生。希望 Flexbox 規範的未來更新能夠解決這種不一致問題並提高跨瀏覽器相容性。

以上是為什麼我的 Flexbox 列子項目沒有填滿 Chrome 中 100% 的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！