minmax(min-content, auto)能撑开空容器，因为它强制轨道下限为子项最小自然高度（如文字行高、图片固有高），避免因无内容导致剩余空间为0而坍缩；而1fr无下限，剩余空间为0时轨道高度归零。
minmax() 本身不防止容器坍塌，它只约束轨道尺寸；真正防坍塌靠的是 grid-template-rows 或 grid-template-columns 中对行/列的显式下限定义 + 子项不脱离文档流。
为什么 minmax(min-content, auto) 能撑开空容器
网格容器高度为 0 的常见原因是子项没内容、被绝对定位，或行轨道没设下限。单纯写 grid-template-rows: 1fr 在无内容时可能归零——因为 1fr 是“等分剩余空间”，而剩余空间是 0。
-
minmax(min-content, auto)显式告诉浏览器：“这行至少得容下子项的最小自然高度（比如文字行高、图片固有高），不够就自动拉伸” - 对比
minmax(100px, auto)：硬设 100px 下限，但若子项实际高度 min-content 动态取值，更贴合真实内容 - 必须用在
grid-template-rows（不是grid-auto-rows）才对容器高度起决定性作用 - 如果子项是
position: absolute或display: contents，它不贡献min-content，这条就失效
minmax(0, 1fr) 对高度坍塌无效，别乱套
minmax(0, 1fr) 是为宽度场景设计的，用于压制长文本撑宽轨道。用在高度上不仅没用，还可能让行高塌成 0 —— 因为 0 允许轨道压缩到不可见，而浏览器不会主动给空行“保底”。
- 高度方向慎用
0，尤其不要写grid-template-rows: minmax(0, 1fr) - 想让行随内容自适应，优先选
auto或minmax(min-content, max-content) - 如果用了
grid-auto-flow: row dense，且子项高度差异大，minmax()对首行高度影响有限，塌陷根源可能在后续行未被显式定义
真正防坍塌要盯住三处：容器、轨道、子项
单改 minmax() 不够，漏掉任一环节都会坍塌。
-
容器本身：确认没被父级设
height: 0、overflow: hidden截断，也没被 Flex/Grid 父容器用align-items: start压扁 -
轨道定义：用
grid-template-rows: minmax(min-content, auto)替代裸1fr；若有多行，避免只写一行轨道，留空行用grid-auto-rows: minmax(min-content, max-content) -
子项状态：检查是否用了
position: absolute、visibility: hidden、空标签，或子项内只有display: contents元素——它们不产生高度
最容易被忽略的是：minmax() 写对了，但子项根本没渲染出高度。调试时直接看 DevTools 的 Computed 面板里子项的 height 和 min-height 是否大于 0，比反复调 CSS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
