Flex容器height无效主因是父容器高度未明确，需逐级设置html、body及中间父容器高度（如height:100%或min-height:100vh）；align-items:stretch失效常因子项设了height/min-height或min-height:0；height:100%需父容器有确定高度；flex:1塌陷多因默认min-height:auto压制flex-basis:0，应显式设min-height:0。
Flex 容器设了 height 却没效果？大概率是父容器“没给高度”
Flex 容器的 默认的 立即学习“前端免费学习笔记（深入）”；height 不是强制指令，而是“声明可用空间”。如果它的父容器高度是 auto（比如普通 height: 300px 就可能被忽略——浏览器根本算不出“300px 能不能放得下”。
html、body 及所有中间父容器有明确高度，例如：html, body { height: 100%; } 或更稳妥的 min-height: 100vh;
flex: 1 或显式 height 获得了可用空间Computed → height，如果是 auto，就坐实了问题根源
align-items: stretch 看似没拉伸？其实是子项自己“拒绝配合”align-items: stretch 只对“没设高度限制 + 没被内容撑死”的子项生效。一旦子项写了 height、min-height，或用了 align-self，拉伸就立即失效。
height、max-height、min-height —— 这些都会直接阻止 stretchmin-height: 0（比如某些 UI 库对 的处理），它反而会卡住拉伸height 类属性，改用 flex: 1 或显式 min-height: 0 来破除隐式最小尺寸保护Flex 子项写
height: 100% 失效？百分比没有计算基准height: 100% 是相对于包含块（containing block）计算的。而 Flex 容器默认不把自身高度作为子项的包含块——除非你先让它有明确高度。
height: 400px 或 min-height: 100vh），否则 100% 就是 100% of auto，结果为 0
height: 100% 分配空间；在 Flex 布局中，flex: 2 和 flex: 3 更可靠、语义更清晰flex-basis: 0 + flex-grow 替代，避免受内容固有尺寸干扰
为什么加了
flex: 1 还是塌陷？flex-basis: 0 遇上 min-height: auto
flex: 1 展开后实际是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。但现代浏览器会给 flex 项目默认加 min-height: auto，这个“自动最小高度”会压住 flex-basis: 0，导致子项仍按内容撑开而非填满剩余空间。
Flex 高度问题从来不是某一行 CSS 写错了，而是高度约束链断在了某一级——从 min-height: 0，立刻看是否恢复拉伸min-height: 0，依然会卡在内容高度img 加 height: 100% + object-fit: cover；长文本加 overflow-wrap: break-word
html 开始查起，一层层看 Computed → height，比反复调 align-items 有效得多。
