首頁 > web前端 > css教學 > 為什麼 Firefox 的「overflow-y」與 Nested Flexbox 不一致?

為什麼 Firefox 的「overflow-y」與 Nested Flexbox 不一致?

Linda Hamilton
發布: 2024-10-26 18:27:02
原創
630 人瀏覽過

Why is Firefox's `overflow-y` Inconsistent with Nested Flexbox?

Firefox 在嵌套Flexbox 上不一致的Overflow-y

使用CSS3 製作複雜的佈局時,overflow-y 屬性對於滾動內容至關重要在特定部分內。但是,當涉及嵌套的 Flexbox 元素時,使用者可能會在 Firefox 中遇到此屬性的問題。這可能會導致不良的滾動行為或缺少正確的滾動條。

要解決此問題,了解 Flexbox 專案的預設行為及其最小大小非常重要。 Flex 項目通常會根據其直接子項的固有大小建立預設的最小大小。對於隱藏溢出,此行為保持不變。

因此,當具有溢出:[hidden|scroll|auto] 的元素駐留在Flex 項目中時,必須為其祖先Flex 項目分配m​​in-width:0 (對於水平柔性容器)或min- height:0 (對於垂直柔性容器)。這有效地禁用了自動最小調整行為,並允許彈性項目縮小到超出其子項目的最小內容大小。

透過在 .level-0-row2 規則中實現此調整,您可以修正溢位 y 行為在 Firefox 中並確保正確的滾動功能。請記住,這僅適用於 Firefox,並且是必要的,因為 Chrome 等其他瀏覽器(最初)忽略了此最小大小調整行為。

以下是經過 min-height:0 調整的更正程式碼片段:

<code class="css">.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}</code>
登入後複製

以上是為什麼 Firefox 的「overflow-y」與 Nested Flexbox 不一致?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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