首頁  >  文章  >  web前端  >  如何防止 Flex Item 超出父級高度並在 Firefox 中啟用捲軸?

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

DDD
DDD原創
2024-10-24 18:39:30465瀏覽

How to Prevent Flex Item from Exceeding Parent Height and Enable Scrollbar in 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn