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（比如普通 <div>），那子容器写的 <code>height: 300px 就可能被忽略——浏览器根本算不出“300px 能不能放得下”。
- 必须逐级确保
html、body及所有中间父容器有明确高度，例如：html, body { height: 100%; }或更稳妥的min-height: 100vh; - 若父容器本身是 flex 容器，还需确认它是否已通过
flex: 1或显式height获得了可用空间 - 用浏览器开发者工具检查父容器的
Computed → height，如果是auto，就坐实了问题根源
align-items: stretch 看似没拉伸？其实是子项自己“拒绝配合”
默认的 align-items: stretch 只对“没设高度限制 + 没被内容撑死”的子项生效。一旦子项写了 height、min-height，或用了 align-self，拉伸就立即失效。
- 检查子元素是否带
height、max-height、min-height—— 这些都会直接阻止 stretch - 特别注意框架或重置样式悄悄加的
min-height: 0（比如某些 UI 库对<button></button>的处理），它反而会卡住拉伸 - 需要拉伸时，优先删掉子项的
height类属性，改用flex: 1或显式min-height: 0来破除隐式最小尺寸保护
Flex 子项写 height: 100% 失效？百分比没有计算基准
height: 100% 是相对于包含块（containing block）计算的。而 Flex 容器默认不把自身高度作为子项的包含块——除非你先让它有明确高度。
