为什么 Overflow-Y 在带有嵌套 Flexbox 元素的 Firefox 中无法按预期运行？

Firefox 中嵌套元素的 Flexbox Overflow-Y 问题

在使用 Flexbox 的 CSS 布局中，其中嵌套元素包含在父 Flexbox 中item、overflow-y 可能无法在 Firefox 中按预期运行。当嵌套元素被赋予 auto 的 Overflow-y 属性时，就会特别出现此问题。

问题说明：

Flexbox 项目会根据内在元素自动计算其最小大小他们的子元素的大小。但是，当存在应用了溢出属性的子元素（例如overflow-y）时，Flex项目将保持与子元素内容相同的最小大小，即使它超出了可用空间。

解决方案:

要在 Firefox 中解决此问题，需要将父 Flex 项目的 min-height 属性显式设置为 0。这将禁用默认的最小大小调整行为并允许 Flex 项目缩小低于子级的最小内容大小。

<code class="css">.parent-flex-item {
  min-height: 0;
}</code>

通过应用此修复，带有 Overflow-y: auto 的嵌套元素现在能够在其内容超出可用高度时缩小并显示滚动条。

代码示例：

考虑以下 HTML 和 CSS 代码：

<code class="html"><div class="parent-flex-item">
  <div class="nested-element">
    <p>This is a long text that exceeds the available height.</p>
  </div>
</div></code>

<code class="css">.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}</code>

使用此代码，嵌套元素将具有Firefox 中的滚动条，允许用户查看溢出的内容。

以上是为什么 Overflow-Y 在带有嵌套 Flexbox 元素的 Firefox 中无法按预期运行？的详细内容。更多信息请关注PHP中文网其他相关文章！