grid子项min-height失效的根本原因是高度上下文断裂：父容器computed height为auto、grid-template-rows固定值锁死、绝对定位脱离布局流、flex父项flex-shrink压缩、或height:100%依赖错误。
Grid容器本身没高度，min-height就无从谈起
写在子项上的 min-height 不会倒推父容器“长高”，它只在父容器已有可计算高度的前提下起作用。如果 .grid-container 的 computed height 是 auto，那里面所有子项的 min-height: 200px 都不会触发——浏览器连“200px 相对于谁”都算不出来。
实操建议：
- 打开开发者工具，逐层点开
.grid-container及其所有父级，在「Computed」面板里确认 height 值是不是具体像素或100vh等可计算值；如果是auto，链路就断了 - 临时给
.grid-container加border: 1px solid red，看它是否视觉上“塌陷”成一条线 - 别只靠
height: 100%：必须确保html、body、中间每一层 wrapper 都设了height: 100%或显式像素值 - 更稳的起步方案：
.grid-container { height: 100vh; }（注意 iOS Safari 地址栏跳变问题，必要时降级用min-height: 100dvh）
子项写了min-height但被grid-template-rows锁死
Grid 行轨道（grid-template-rows）一旦设为固定值（如 100px 或 2fr），子项的 min-height 就可能被忽略——因为浏览器优先按轨道分配空间，而不是让子项自己决定最小高度。
实操建议：
- 若需子项弹性撑开，改用
grid-template-rows: auto;或grid-auto-rows: minmax(min-content, max-content); - 避免混用
grid-template-rows: 1fr;和子项min-height: 200px：1fr 没有基准高度时，会退化为内容高度，min-height失去作用场景 - 想让某一行“至少 200px”，直接写
grid-template-rows: minmax(200px, 1fr);，把约束放在轨道层，比依赖子项更可靠
绝对定位子项的min-height像没写一样
Grid 子项如果加了 position: absolute，它就脱离了 Grid 布局流，此时它的 min-height 只在其包含块（containing block）内生效——而这个包含块通常是第一个非 static 定位祖先，不一定是 Grid 容器本身。
实操建议：
- 把
min-height显式加到绝对定位元素自身上，例如：.popup { min-height: 200px; position: absolute; } - 避免同时设置
top和bottom：这会让浏览器优先按定位拉伸，min-height很可能被跳过 - 如果目标是“占满 Grid 区域又带最小高度”，优先放弃绝对定位，改用
align-self: stretch+min-height组合
Flex容器嵌套Grid时min-height突然失效
当 Grid 容器被包在 Flex 容器里，且父 Flex 项设了 flex-shrink: 1（默认值），它会在空间不足时压缩自身，连带把 Grid 容器压扁——这时 Grid 子项的 min-height 还没机会触发，整个上下文就先塌了。
实操建议：
- 给 Grid 容器的 Flex 父项加
flex-shrink: 0或flex: 0 0 auto - Grid 容器自身加
min-height: 0：这是个冷门但关键的 trick，能防止 Flex 父项在计算时错误地将 Grid 当作“无限可缩”容器 - 检查是否误用了
height: 100%在 Grid 容器上：它只认父容器的height，不认min-height，哪怕父 Flex 项写了min-height: 400px，height: 100%仍算出 0
min-height 写错了，而是它所依赖的高度上下文在某一层被隐式切断了——比如 Flex 的 flex-shrink、Grid 的轨道定义、或者一个没被注意到的 position: relative 祖先。动手前，先用开发者工具点开 computed height，比反复调样式快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
