fr单位在Flex父容器中失效的根本原因是缺乏高度上下文，即父容器未设置明确高度（如height或min-height），导致Grid子项高度为0或auto，使1fr无法计算；必须满足父Flex有交叉轴尺寸、align-items: stretch且Grid容器有块级尺寸基础三个条件。
fr单位在Flex父容器里不计算剩余空间，根本原因是没高度上下文
fr不是“按比例切容器宽高”，而是“把当前容器的可用空间按份数分”。如果父Flex容器没给Grid子项分配明确的高度（比如用align-items: stretch但自身没高度），那Grid容器的height就可能是0px或auto，1fr自然无从算起。
常见错误现象：grid-template-rows: 1fr 2fr写得再标准，第二行内容也挤成一条线；开发者工具里display: grid明明亮着，但Computed面板里height是0px。
- 别只看Styles面板——必须打开Computed标签页，确认
display最终值是grid，且height不是0或远小于预期 - 临时加
border: 1px solid red和min-height: 100px，看子项是否开始按行列排列；若仍无变化，说明Grid逻辑根本没触发 - 父Flex容器本身必须有明确高度约束，例如
min-height: 300px或height: 100vh，不能只靠内容撑开
Flex父级下Grid容器生效的三个硬性条件
缺一不可。少一个，fr就退化成auto，布局行为不可控。
- 父Flex项需保持
align-items: stretch（默认值），且父Flex容器自身有交叉轴尺寸：比如Flex方向是row，那就要有明确的height或min-height - Grid容器自身要有块级尺寸基础：不能只写
display: grid就完事，要加width: 100%、flex: 1或min-width: 0防文字撑破 - Grid定义不能全靠
fr：比如grid-template-rows: 1fr 1fr在无高度上下文时直接失效；建议至少设一个固定轨道，或搭配minmax(0, 1fr)
嵌套结构中display切换为什么看起来“失效”
不是CSS被忽略，是选择器特异性压过了媒体查询里的规则。比如父容器写了main .grid-container { display: grid; }，媒体查询里只写.grid-container { display: flex; }，后者永远赢不了前者。
- 检查Computed面板里
display最终值——如果不是你期望的flex或grid，大概率是选择器冲突 - 媒体查询内规则的选择器特异性必须≥原始规则：比如原始是
section .container，媒体查询就得写section .container或.container.flex-layout，不能偷懒只写.container - 避免在同一个元素上反复切
display：Flex → Grid → Flex容易因尺寸塌陷导致状态错乱；优先用@supports做能力检测，而不是纯媒体查询硬切
Chrome和Firefox对嵌套flex+grid的min-height处理不一致
Chrome新版默认给Flex子项加了min-height: auto，Firefox还守着min-height: 0老规范。结果就是同一段代码，Chrome里Grid子项能撑开，Firefox里直接看不见。
- 只要子容器是
display: grid且在Flex父级里，它的样式里必须显式写min-height: 0 - 同理，水平方向防溢出要加
min-width: 0，尤其当子Grid里有长文本或图片时 - 别依赖
height: 100%——它在Flex上下文中不可靠；flex: 1+min-height: 0才是稳定组合
实际调试时最容易卡住的点，往往不是grid-template-rows写错了，而是父Flex容器连自己有没有高度都说不清。先盯死Computed里的height和display两个值，比反复改fr数字管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
