Firefox中嵌套Flex容器高度为0，是因为其对flex:1链的可用空间计算更严格：当某层父容器无明确高度（如height:auto），Firefox直接认定交叉轴空间为0，导致子级flex:1失效；Chrome则常宽容fallback至内容高度。
Firefox 中嵌套 Flex 容器高度为 0 的根本原因
不是 Flex 写错了，而是 Firefox 对 flex: 1 链的“可用空间”计算更严格：当某一层父容器没有明确高度（比如 height: auto 或未继承到 min-height），Firefox 直接认定其交叉轴空间为 0，导致所有子级 flex: 1 失效并渲染成 0 高度；Chrome 则常“宽容”地 fallback 到内容高度，掩盖问题。
常见触发场景：
- 最外层没设
html, body { min-height: 100vh; }，只靠height: 100%传递 - Grid 单元格未设
min-height: 0或height: 100%，导致内部 Flex 容器拿不到拉伸基准 - 嵌套中某层用了
align-items: stretch+height: fit-content，后者覆盖前者，切断 flex 链
Grid 单元格内 Flex 不撑高的实操修复
Grid 项默认不拉伸，Flex 容器又依赖父容器提供高度上下文——两者叠加时，Firefox 比 Chrome 更早放弃计算。
必须同时满足以下条件：
立即学习“前端免费学习笔记（深入）”；
- Grid 容器本身有明确高度（如
min-height: 100vh或固定值） - 该 Grid 单元格加
min-height: 0（关键！禁用浏览器对最小尺寸的隐式限制） - 单元格内的 Flex 容器设
display: flex+flex-direction: column+flex: 1 - Flex 容器再加
min-height: 0或overflow: hidden（触发 BFC，强制参与高度计算）
示例关键样式：
.grid {
display: grid;
min-height: 100vh;
}
.grid-item {
min-height: 0; /* 这行在 Firefox 里不能少 */
}
.flex-container {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; /* 或 overflow: hidden */
}为什么 overflow: hidden 在 Firefox 里能“救”高度
它不是靠裁剪，而是触发 BFC（块级格式化上下文），让浏览器重新把该元素当作一个独立高度计算单元。否则，Firefox 可能因内部子项未设高、又无约束，直接跳过整条 flex 链的高度推导。
注意点：
-
overflow: auto比hidden更稳妥——既保高度计算，又防意外裁剪弹层或阴影 - iOS Safari 对
overflow: hidden+position: fixed有兼容问题，生产环境建议补-webkit-overflow-scrolling: touch - 别在 JS 里动态写
el.style.overflow = 'hidden'就完事——得确保该元素已挂载且样式生效后再测高度
混用 Grid/Flex 时 Firefox 容易断链的隐藏位置
断点往往不在你写的那层，而在“看不见”的祖先链上。比如：
-
html和body默认是height: auto，没加min-height: 100vh，整条链从根就断了 - 某中间层容器用了
display: block包裹 Grid，却忘了给它设高，Grid 容器实际拿到的是height: 0 - 响应式媒体查询里漏写了某断点下的
min-height，Firefox 在该宽度下直接回退到auto
调试建议：打开 DevTools，逐层检查 computed height，看到第一个 0px 就停——那里就是断点。别只盯着你怀疑的那层。
