## 为什么带有 `flex: 1` 的 Flex 项目在 Firefox 中会超出其父级高度，而在 Chrome 中却不会？

在 Firefox 中防止 Flex 项目超出父级高度和滚动条的功能

在 Firefox 中，观察到子 Flexbox 项目的 flex: 1 和溢出 - y：滚动可能会超出其父级 Flexbox 的高度，导致内容溢出且滚动条不出现。相反，在 Chrome 中，子项正确填充剩余垂直空间，出现滚动条，并且不超过父项高度。

解决方案

要解决此问题，请将 flex: 1 替换为 flex : 1 1 1px 用于子 Flexbox 项目。这会将 flex-basis 设置为固定值 1px，确保会发生滚动溢出并出现滚动条。

说明

尽管在这种情况下设置 min-height: 0 是常见做法，在这种情况下这是不够的。速记规则 flex: 1 包含了 flex-basis: 0，在 Firefox 和 Edge 中不足以触发溢出。

根据 MDN：

为了让溢出产生效果，块级容器必须具有设置的高度（height 或 max-height）或设置为 nowrap 的空白。

为了确保标准化行为并启用溢出，请为 flex-basis 设置固定高度，甚至最小值，例如 1px。

以上是## 为什么带有 `flex: 1` 的 Flex 项目在 Firefox 中会超出其父级高度，而在 Chrome 中却不会？的详细内容。更多信息请关注PHP中文网其他相关文章！