为什么在具有嵌套 Flexbox 布局的 Firefox 中，overflow-y 无法按预期工作？

嵌套 Flexbox 布局的 Firefox Overflow-Y 问题

在使用嵌套 Flexbox 设计的 100% 宽度和 100% 高度布局中，出现意外的情况在 Firefox 中遇到的行为是，overflow-y 无法正常工作。

问题：

为什么overflow-y 无法按照所提供的 CSS 代码按预期工作，导致Firefox 显示不正确的滚动条？

答案：

此问题是由于 Flex 项目的默认最小尺寸行为而产生的。 Flex 项目根据其子项的固有大小导出其最小大小，而不考虑应用于其后代的溢出-y。

当具有溢出-y: [hidden|scroll|auto] 的元素放置在 Flex 项目中时，需要在相应的祖先 Flex 项目上设置 min-width:0 （对于水平 Flex 容器）或 min-height:0 （对于垂直 Flex 容器）。这将禁用默认的最小大小调整行为，允许弹性项目缩小到子项的最小内容大小以下。

要解决此问题，请将 min-height:0 添加到 .level-0-row2 规则中，如以下更新的 CSS 代码所示：

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

这确保 .level-0-row2 弹性项目考虑其子项的溢出 y 并允许其缩小到最小内容大小以下，从而启用适当的Firefox 中的溢出行为。

以上是为什么在具有嵌套 Flexbox 布局的 Firefox 中，overflow-y 无法按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！