為什麼 Firefox 的「overflow-y」與 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中文網其他相關文章！