min-height本身不导致错乱，而是暴露父容器高度缺失或布局冲突；grid-template-rows: 1fr失效源于容器高度为auto，无空间可分，需设min-height: 100vh或100dvh并确保html/body有高度继承。
min-height 本身不会导致错乱，错乱是它暴露了父容器高度缺失或布局逻辑冲突的真实问题。
grid-template-rows: 1fr 失效，其实是容器没高度
写了 grid-template-rows: 1fr 1fr 却只看到一行内容？这不是 1fr 坏了，而是网格容器本身高度为 auto，1fr 没有“剩余空间”可分。此时加 min-height: 100vh 只是让问题显性化——你终于看见了塌缩的容器。
- 检查
html和body是否设了height: 100%或min-height: 100vh；没设，子级所有百分比/1fr 高度都会退化为auto - 避免在网格容器上同时写
height: 100%和min-height: 100vh——前者可能因祖先链断掉而算出 0，后者反而被忽略 - 用
min-height: 100dvh替代100vh，能更好应对 iOS 地址栏收放导致的视口高度跳变
Flex 嵌套 Grid 时，min-height 触发对齐冲突
常见于侧边栏 + 主内容区布局：主区是 Grid，内部卡片又用 Flex 排列文字和按钮。一旦给卡片加 min-height，按钮就飘到顶部或底部，不再居中。
- Grid 项默认
align-items: stretch，但若卡片自身设了min-height且内容不足，Flex 容器的align-items: center就会失效 - 解决方案不是删
min-height，而是给 Grid 项加align-self: start（解除拉伸），再让内部 Flex 控制对齐 - 更稳妥的做法：Grid 项用
min-height: 0+display: flex+flex-direction: column，把高度控制权完全交给 Flex
grid-auto-rows 与 min-height 同时存在时，行高计算不可控
设了 grid-auto-rows: minmax(200px, 1fr)，又给某个网格项加 min-height: 300px，结果整行被撑高，其他项被迫拉伸，布局失衡。
-
grid-auto-rows是隐式行的最小高度，不是上限；min-height在项上生效后，浏览器会优先满足项的高度，再反推行高 - 想固定行高？改用
grid-template-rows: repeat(3, 200px)，并确保容器有明确高度 - 想弹性但防塌陷？用
grid-template-rows: repeat(3, minmax(200px, max-content))，比混用min-height更可预测
真正危险的不是 min-height，而是把它当成“补丁”去掩盖高度继承断裂、嵌套对齐规则覆盖、或隐式轨道尺寸失控这些底层问题。每次加之前，先问一句：这个高度基准，到底从哪来？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
