父容器交叉轴无高度导致flex子项无法拉伸；需设min-height: 100vh并确保html/body有height: 100%，同时子项禁用height/min-height/max-height，改用flex: 1实现拉伸。
父容器交叉轴没高度，Flex子项根本拉伸不了
加了 display: flex 却不等高，90% 是因为父容器在交叉轴（垂直方向）没有可参照的高度。浏览器不会凭空“猜”你想要多高——它只按规则拉伸：有明确高度才拉，没高度就按内容各自撑开。
- 检查父容器的
computed height：如果是auto或0px，就是根源 - 别指望靠子项内容撑开父容器后“顺便等高”，那只是巧合；真正等高需要父容器本身有约束（比如
min-height: 300px、height: 100vh，或被上层flex: 1分配空间） - 常见破防点：外层是普通
div，里面全是position: absolute或浮动元素 → 父容器塌陷，align-items: stretch失效
子项写了 height / min-height 就等于主动退出等高队列
align-items: stretch 不是“强制覆盖”，而是“默认行为”；一旦子项自己设了 height、min-height 或 max-height，拉伸立刻中断，以你写的值为基准。
- 删掉所有子项上的
height: 100%—— 它在父容器无显式高时无效，还干扰 stretch - 若需最小高度保障，用
min-height: min-content或min-height: fit-content（注意 Safari 兼容性），而不是min-height: 200px - 子项里嵌套了
div？记得给它加min-height: 0，否则内部块级元素会阻止收缩，导致视觉错位
响应式换行时等高还在，但别指望跨行对齐
用了 flex-wrap: wrap 后，stretch 只在**每一行内生效**，不同行之间高度互不影响。这是正常行为，不是 bug。
- 想让所有卡片统一高度？别硬靠 Flex 拉伸，改用
display: grid+grid-auto-rows: minmax(0, 1fr) - 小屏堆叠时，
@media (max-width: 768px) { .container { flex-direction: column; } }是合理做法；此时等高失效是预期结果——单列不需要“等高” - 如果小屏下仍要视觉统一（比如卡片列表），优先切到 Grid，而不是给子项加
height或 JS 计算
IE11 和绝对定位会让等高“看起来失效”
IE11 对 align-items: stretch 的支持存在底层缺陷，尤其在嵌套、含 border/padding 或 min-height 的场景下，常直接忽略拉伸逻辑。
- 兼容 IE11 时，避免同时写
height和flex；子项统一加box-sizing: border-box；父容器改用height: 1px; min-height: 100%替代纯min-height - 子项里用了
position: absolute？它不参与高度计算，但也不破坏父项等高——问题不在 Flex，而在你误把“按钮贴底”这种内容对齐责任交给了布局层 - 真正要对齐的是按钮位置，不是容器高度；改用
display: flex; flex-direction: column;+margin-top: auto更可靠
computed height 是多少、是不是 auto。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
