防止子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中文網其他相關文章!