首頁 > web前端 > css教學 > 為什麼我的 Flex 子項目在 Firefox 中會超過父級高度,而在 Chrome 中卻不會?

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

DDD
發布: 2024-10-24 18:42:02
原創
278 人瀏覽過

Why Does My Flex Child Exceed Parent Height in Firefox but Not 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中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板