父容器未设高度时子容器flex:1无效，因flex:1仅分配父容器已有的交叉轴空间；须确保父容器有明确高度（如min-height:100vh），嵌套flex需加min-height:0解除默认限制。
父容器没给高度，子容器的 flex: 1 就是空转
这是最常被忽略的起点：父容器本身 height 是 auto，子容器写了 flex: 1 也毫无意义。浏览器不会凭空分配“可用高度”，flex: 1 只能分配父容器已有的交叉轴空间。
检查方式很简单：用开发者工具选中父容器，在 Computed 面板里看 height 值。如果是 auto 或 0px，问题就在这儿。
- 别在 flex 容器自己身上写
height: 100%——它依赖整条祖先链都有明确高度，极难调试 - 给它的直接父元素加
min-height: 100vh（或具体像素值），不是给它自己加 - 若在 Bootstrap 中，
.d-flex类只设display: flex，不提供高度，必须手动补min-height - 特别注意
html和body：默认是height: auto，整页 flex 布局前得先加html, body { min-height: 100vh; }
min-height: 0 是嵌套 Flex 的隐形开关
Chrome 和 Firefox 对 flex 项目默认 min-height 的处理不同：Chrome v89+ 默认加了 min-height: auto，Firefox 还按老规范走 min-height: 0。同一段代码，可能在一个浏览器里正常，在另一个里塌成一条线。
min-height: 0 不是“设最小高度”，而是解除 flex 项目默认的最小尺寸限制，让它真正响应 flex: 1 的拉伸指令。
- 只要子容器是 flex 项目（即父容器为
display: flex），且你希望它内部再 flex，就必须加min-height: 0 - 常见位置：模态框的
.modal-body、卡片内层容器、Grid 单元格里的 flex 容器 - 配合
overflow: auto更稳妥：既防塌陷，又允许滚动，避免内容被意外裁剪
子容器用了 display: flex，但父容器没给它空间
父容器把子容器当做一个普通弹性项目，不会自动透传布局能力。哪怕子容器写了 display: flex，如果它自己宽度/高度是 0，那它内部的 flex 就根本没机会渲染。
典型症状包括：justify-content 没反应、flex-direction: column 下内容堆成一团、子容器高度始终为 0。
- 确认父容器是否设置了
flex-direction: row，而子容器是块级却没设width或flex-basis，导致被压扁 - 检查子容器有没有被
overflow: hidden或未设min-height: 0截断伸展能力 - 子容器如果是
div且无内容，又没设height，它大概率拿到的是 0 高度——flex 布局不保证“有容器就有空间” - 避免在子容器上写
height: 100%；改用flex: 1+min-height: 0更鲁棒
嵌套两层以上时，flex: 1 链在哪断的？
断点往往不在代码写错，而在“隐式高度丢失”：某一层容器虽写了 flex: 1，但它父级是 display: block 或没设 min-height，导致它实际拿到的是 height: 0，再往下所有 flex: 1 都失效。
调试方法是逐层向上查 computed height：从最外层开始，看每一层是否非零。尤其注意中间层是否被框架类（如 Bootstrap 的 .row）悄悄覆盖了样式。
- Grid 单元格里嵌套 Flex，要给 Grid 项加
min-height: 0或height: 100%，否则 Flex 容器感知不到可用空间 - 使用
overflow-anchor: none可缓解滚动条闪烁，但要注意可能影响滚动恢复 - 动态内容（如 CMS 渲染）容易触发“高度传染”：孙子元素内容变化，通过父级 Flex 向上传递，导致整块布局抖动
真正卡住人的从来不是某一行 CSS 写错了，而是高度约束链断在了某一级——从 html 开始查起，一层层看 Computed → height，比反复调 align-items 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
