为什么 Firefox 的“overflow-y”与 Nested Flexbox 不一致？

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