为什么我的 Flex 子项在 Firefox 中会超过父级高度，而在 Chrome 中却不会？

防止子 Flex 项目超过父级高度

当 Flex 容器包含同时具有 flex: 1 和 Overflow-y 的子项目时：滚动，Chrome 和 Firefox 之间就会出现差异。在 Chrome 中，子项会展开以填充剩余空间，但不会超过父项的高度，从而产生可见的滚动条。然而，在 Firefox 中，子项的高度会增加，脱离父项。

解决方案

要在 Firefox 中解决此问题，请将 flex: 1 替换为 flex： 1 1 1 像素。这设置了固定的最小基础 1px，确保即使内容溢出，子项目也不会超过父项目的高度。

修订代码

<code class="css">#messagelist {
  flex: 1 1 1px;
}

#messagecontents {
  flex: 1 1 1px;
}</code>

此修改可确保子项展开以填充可用空间，同时保持包含在 Flex 容器内。 Chrome 和 Firefox 中都会出现滚动条，允许用户查看可见区域之外的内容。

以上是为什么我的 Flex 子项在 Firefox 中会超过父级高度，而在 Chrome 中却不会？的详细内容。更多信息请关注PHP中文网其他相关文章！