為什麼我的 Flex 子項目在 Firefox 中會超過父級高度，而在 Chrome 中卻不會？

防止子Flex 項目超過父級高度

當Flex 容器包含同時具有flex: 1 和Overflow-y 的子項目時：滾動，Chrome 和Firefox 之間就會出現差異。在 Chrome 中，子項會展開以填滿剩餘空間，但不會超過父項的高度，從而產生可見的捲軸。然而，在 Firefox 中，子項的高度會增加，脫離父項。

解決方案

要在 Firefox 中解決此問題，請將 flex: 1 替換為 flex： 1 1 1 像素。這設定了固定的最小基礎 1px，確保即使內容溢出，子項目也不會超過父項目的高度。

修訂代碼

<code class="css">#messagelist {
  flex: 1 1 1px;
}

#messagecontents {
  flex: 1 1 1px;
}</code>

此修改可確保子項展開以填充可用空間，同時保持包含在 Flex 容器內。 Chrome 和 Firefox 中都會出現捲軸，讓使用者可以查看可見區域以外的內容。

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