为什么“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中文网其他相关文章！