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 容器默认不把自身高度作为子项的包含块——除非你先让它有明确高度。
- 父容器必须有确定高度（如
height: 400px或min-height: 100vh），否则100%就是100% of auto，结果为0 - 避免依赖
height: 100%分配空间；在 Flex 布局中，flex: 2和flex: 3更可靠、语义更清晰 - 若必须用百分比，且父容器是 column 方向，可搭配
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，导致子项仍按内容撑开而非填满剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：给子项加
min-height: 0，立刻看是否恢复拉伸 - 嵌套 flex 容器也要同步处理——外层拉伸了，内层若没设
min-height: 0，依然会卡在内容高度 - 图片、文字等特殊内容需额外干预：
img加height: 100%+object-fit: cover；长文本加overflow-wrap: break-word
html 开始查起，一层层看 Computed → height，比反复调 align-items 有效得多。
