子网格容器塌陷是因为父级高度未传递：height: 100%依赖直接父元素的computed height，若为auto则失效；inline-grid需改grid；flex嵌套时需设min-height: 0并确保父项有明确高度。
Grid容器设了height: 100%，但子项里的网格容器（比如.profile-grid）依然塌陷——不是你漏写了样式，是高度链在它父级就断了。
为什么height: 100%对子网格容器完全没反应
浏览器计算height: 100%时，只看**直接父元素的 computed height**。如果父元素显示auto（比如一个没设高的div），那子网格容器的100%就等于“100% × 0px”，结果就是height: auto，内容撑多少就多少。
- 用开发者工具选中该子网格容器 →「Computed」面板 → 查
height：若值为auto，说明父级没传下来高度 - 常见断点：父级用了
display: inline、float、position: absolute，或中间某层是min-height: auto但没设height - Grid 容器自身若没明确高度，
grid-template-rows: 1fr就无空间可分，第二行直接塌成一条线
display: inline-grid会让子网格容器宽度/高度都锁死
如果你给子网格容器设的是display: inline-grid，那它本质上是个内联元素，宽度和高度都不参与块级流，width: 100%和height: 100%基本无效。
- 打开开发者工具检查
display值：看到inline-grid就立刻改成grid -
inline-grid只适合小图标组、行内按钮等微布局；主内容区、卡片列表等必须用display: grid - 改完仍不撑开？继续查父容器是否设了
width: 0、min-width: 0或overflow: hidden
Flex嵌套Grid时，子网格容器高度被min-height: auto卡住
当子网格容器放在 Flex 项里，而该 Flex 项又没显式设高，浏览器会按默认min-height: auto处理——即“至少容纳内容”，此时height: 100%会被忽略，1fr也分不到空间。
- 给子网格容器加
min-height: 0（不是height: 0），解除默认最小高度限制 - 同时确保它的父 Flex 项有明确高度上下文（比如
flex: 1或height: 100vh） - 别在 Flex 子项上同时写
align-self: stretch和height: 100%，后者在 Safari 14–15.6 中可能触发兼容问题
真正卡住的往往不是最后一层样式，而是你没点开开发者工具，一层层往上查到html——只要其中任意一层computed height是auto，整条链就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
