為什麼「overflow-y」不能在 Firefox 中與巢狀 Flexbox 一起使用？

Firefox Overflow-y 不適用於嵌套Flexbox

在CSS3 Flexbox 中，當Overflow-y 應用於嵌套的彈性元素。這可以防止 Flex 元素垂直滾動，如 CodePen 所示：http://codepen.io/anon/pen/NPYVga。

詳細說明：

預設情況下，彈性項目根據其子項目的固有尺寸建立最小尺寸。當 Flex 專案中包含具有溢位：[hidden|scroll|auto] 的元素時，Flex 專案始終拒絕縮小到小於子項的最小內容大小。

解決方案：

要解決此問題，請將min-height:0 分配給祖先Flex 專案（提供的程式碼中的.level-0-row2 ）。這會停用預設的最小尺寸調整行為，從而允許彈性項目根據需要縮小。

這是一個經過修正的代碼筆，已修復：

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;
}

注意：

Chrome 目前不強制執行此預設的最小大小調整行為，但在特定情況下可能會錯誤地將最小大小折疊為0。

以上是為什麼「overflow-y」不能在 Firefox 中與巢狀 Flexbox 一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！