如何防止 Flex Item 超出父級高度並在 Firefox 中啟用捲軸？

在Firefox 中防止Flex 項目超出父級高度並啟用滾動條

Flex 容器可能很難管理，尤其是在處理子元素時有捲軸的。在 Firefox 中，具有 flex: 1 屬性和 overflow-y:scroll 的子 div 往往會超過其父 Flexbox 容器的高度。造成此問題的原因是瀏覽器對 flex: 1 簡寫的解釋不同。

要解決此問題，請將 flex: 1 替換為 flex: 1 1 1px。此調整值明確將 flex-basis（最小寬度或高度）設定為 1px。當與 overflow-y:scroll 結合使用時，它會強制子 div 遵守父級的高度限制，並在必要時顯示捲軸。

以下是具體的程式碼調整：

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

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

完成這些變更後，子div 將擴展以填充父容器內剩餘的垂直空間，但它將不再超過父容器的高度。當內容溢出時會出現捲軸，允許用戶垂直滾動內容，而子 div 不會無限增長。

以上是如何防止 Flex Item 超出父級高度並在 Firefox 中啟用捲軸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！