根本原因是Grid项默认min-height:auto且不继承父高度，导致内部Flex容器无法感知可用空间；须设min-height:0或height:100%解除限制，并确保Grid容器自身有明确高度。
Grid 项内嵌 Flex 容器时子元素高度塌陷
根本原因是 Grid 项默认 min-height: auto，且不继承父容器高度；Flex 容器若无明确高度，其主轴（通常是垂直方向）就无法“感知”可用空间，导致子元素无法撑开或对齐失效。
必须给 Grid 项加 min-height: 0 或 height: 100%
仅设 display: flex 不够，Grid 项本身得先“让出空间”：
-
min-height: 0是最稳妥写法，解除 Grid 项默认的最小高度限制 -
height: 100%也可行，但前提是 Grid 容器自身有明确高度（如height: 100vh或父级设了height） - 避免同时用
align-items: stretch和height: fit-content——后者会覆盖前者，使拉伸失效
Flex 子元素也要加 min-height: 0 或 height: 100%
Grid 项设好后，内部 Flex 容器仍需显式声明高度行为：
- 如果 Flex 容器是块级元素，加
height: 100%可让它填满 Grid 项 - 若 Flex 容器是 inline 元素或需兼容内容收缩场景，优先用
min-height: 0 - 注意：
min-width: 0是解决text-overflow: ellipsis失效的配套手段，别和高度逻辑混淆
常见错误现象与调试线索
遇到子元素不撑开时，先看 DevTools 的 Computed 面板：
- Grid 项的
min-height是不是auto？→ 补min-height: 0 - Flex 容器的
height是不是auto？→ 补height: 100%或min-height: 0 - 父级 Grid 容器有没有设置高度？没有的话，
100%就没参照物 - 是否误用了
align-content？它在单行 Grid 中完全无效，该用align-items或justify-items
实际中最容易被忽略的是：Grid 容器本身没设高度，却指望子项里的 Flex 去“自动填满”——这就像问空气要支撑力，得先锚定一个基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
