Firefox 在嵌套Flexbox 上不一致的Overflow-y
使用CSS3 製作複雜的佈局時,overflow-y 屬性對於滾動內容至關重要在特定部分內。但是,當涉及嵌套的 Flexbox 元素時,使用者可能會在 Firefox 中遇到此屬性的問題。這可能會導致不良的滾動行為或缺少正確的滾動條。
要解決此問題,了解 Flexbox 專案的預設行為及其最小大小非常重要。 Flex 項目通常會根據其直接子項的固有大小建立預設的最小大小。對於隱藏溢出,此行為保持不變。
因此,當具有溢出:[hidden|scroll|auto] 的元素駐留在Flex 項目中時,必須為其祖先Flex 項目分配min-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中文網其他相關文章!