flex: 1 不撑高是因为父容器缺失明确高度（如 min-height: 100vh）且未设 min-height: 0，导致子项按 height: auto 渲染为 0；必须逐级确保父容器有高度约束，并为 flex 项显式设置 min-height: 0 才能正确拉伸。
flex: 1 为什么在嵌套里突然不撑高？
根本不是 flex: 1 失效，而是它依赖的“高度上下文”断了。父容器没给明确高度（比如漏写 min-height: 100vh 或 height: 500px），子容器就算写了 flex: 1，也会按 height: auto 渲染——结果就是 0 高度，内容直接消失或溢出。
常见错误链：display: flex → flex-direction: column → flex: 1 子项 → 但父级是 display: block 或没设高度 → 整条链塌陷。
- 必须确保父容器有明确高度约束（
min-height优先于height，防内容超长） - 子容器自己要同时设
display: flex+flex-direction: column（纵向拉伸时） - 别用
height: 100%替代flex: 1，它依赖整条祖先链都有高度，调试成本极高
flex: 1 的子元素内容被裁剪或滚动失效
加了 flex: 1 却看不到内容，或者 overflow: auto 不触发滚动——大概率是因为没加 min-height: 0。
浏览器默认给 flex 项设了 min-height: auto（图片、iframe、长文本会强制撑开高度），这会阻止 flex: 1 拉伸生效；而 min-height: 0 是显式解除这个保护，让 flex 规则真正接管高度分配。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1必须搭配min-height: 0（垂直布局）或min-width: 0（水平布局）才可靠 -
overflow: hidden能“修复”塌陷，本质是触发 BFC，强制浏览器重新计算高度；但生产环境建议用overflow: auto - iOS Safari 对
position: fixed+overflow: hidden有兼容问题，需补-webkit-overflow-scrolling: touch
flex: 1 在多层嵌套中哪一环最容易断？
断点往往不在代码写错，而在某一层“隐式高度丢失”：比如第二层容器写了 flex: 1，但它父级（第一层）只是 display: flex 但没设 min-height，那第二层实际拿到的是 0 高度，再往下所有 flex: 1 全部失效。
- 逐级检查：从最外层开始，确认每层父容器是否提供交叉轴空间（纵向布局看 height/min-height，横向看 width/min-width）
- 用浏览器开发者工具的 Layout 面板，hover 查看每个元素的 computed height，快速定位哪一层是 0
- Tailwind 用户注意：
h-full不等于h-screen，它只继承父级高度，若父级没高度，h-full就是 0
文字/图片过长导致 flex: 1 容器被撑破
flex 项默认有 min-width: auto（水平）或 min-height: auto（垂直），遇到长单词、数字串或大图，会无视 flex-shrink 强行撑开容器。
- 水平场景：加
min-width: 0+word-break: break-word或overflow-wrap: break-word - 垂直场景：加
min-height: 0+overflow: auto（避免页面整体滚动） - 侧边栏固定宽度时，别写
flex: 1，改用flex: 0 0 240px，否则缩屏时会被压缩
flex: 1 看似简单，但每一层都得主动“锚定”高度或尺寸，漏掉任意一环，整条链就垮。最常被忽略的是 min-height: 0 和父级高度缺失——这两处不补，其他都白调。 
