## 為什麼帶有 `flex: 1` 的 Flex 項目在 Firefox 中會超出其父級高度，而在 Chrome 中卻不會？

在Firefox 中防止Flex 項目超出父級高度和滾動條的功能

在Firefox 中，觀察到子Flexbox 項目的flex: 1 和溢出- y ：捲動可能會超出其父級Flexbox 的高度，導致內容溢位且捲軸不出現。相反，在 Chrome 中，子項正確填滿剩餘垂直空間，出現捲軸，且不超過父項高度。

解決方案

要解決此問題，請將 flex: 1 替換為 flex : 1 1 1px 用於子 Flexbox 專案。這會將 flex-basis 設定為固定值 1px，確保會發生滾動溢出並出現捲軸。

說明

儘管在這種情況下設定 min-height: 0 是常見做法，在這種情況下這是不夠的。速記規則 flex: 1 包含了 flex-basis: 0，在 Firefox 和 Edge 中不足以觸發溢出。

根據 MDN：

為了讓溢位產生效果，區塊級容器必須具有設定的高度（height 或 max-height）或設定為 nowrap 的空白。

為了確保標準化行為並啟用溢出，請為 flex-basis 設定固定高度，甚至最小值，例如 1px。

以上是## 為什麼帶有 `flex: 1` 的 Flex 項目在 Firefox 中會超出其父級高度，而在 Chrome 中卻不會？的詳細內容。更多資訊請關注PHP中文網其他相關文章！