height: auto 导致 align-items 失效，因其使父容器交叉轴尺寸不可计算；stretch 在 height: auto 下不拉伸子项，仅按内容撑高；需用 min-height、--vh 变量或 align-self/min-height: 0 修复。
height: auto 是 Flex 对齐失效的常见根源，不是属性写错了，而是它让浏览器失去了对齐所需的“参考系”。
align-items: center 为什么在 height: auto 容器里不生效
Flex 的 align-items（比如 center、flex-end）依赖交叉轴有可计算的尺寸。当父容器是 height: auto，它的高度完全由子内容撑开——此时“居中位置”无法确定，浏览器只能按默认基线或顶部渲染。
- 移动端尤其明显：
body或外层div没设min-height，内容一少，容器就塌了，align-items: center形同虚设 - 用
min-height: 100dvh替代height: 100vh更稳，避免 Safari 地址栏收放导致视口高跳变 - 若必须用 JS 动态适配，建议注入
--vh变量，再通过calc(var(--vh) * 100)计算，别直接写死100vh
align-items: stretch 在 height: auto 下实际没拉伸
很多人以为 align-items: stretch（Flex 默认值）会让子项“自动等高”，但前提是父容器有明确高度约束。在 height: auto 容器中，stretch 不会强制拉伸，而是退化为“各自按内容撑高”——这就是卡片底部参差、按钮错位的直接原因。
- 子项若设置了
height、min-height或flex: 1，会进一步干扰 stretch 行为 - 图片等替换元素默认有基线对齐行为，即使父容器是
height: auto，也会造成视觉错位；应加vertical-align: top或统一设display: block - 验证是否真被拉伸：给父容器加
border: 1px solid red，子项加outline: 1px dashed blue，看底边是否对齐
overflow: auto + height: auto 组合下滚动失效
当父容器同时设 display: flex、height: auto 和 overflow: auto，子项常被意外截断或无法滚动——问题不在 overflow，而在 stretch 把子项“钉死”在不可见的高度基准里。
- 典型场景：
position: fixed容器 +top/bottom计算高度 → 实际高度确定，但开发者误写成height: auto，导致 stretch 失效且无溢出 - 修复关键：子项需显式解除拉伸，如
align-self: flex-start或min-height: 0（尤其对嵌套 flex 子项） - 更彻底的解法是放弃
height: auto与overflow: auto的混用，改用min-height+max-height组合控制弹性范围
真正难处理的不是怎么写对齐代码，而是判断当前容器有没有隐式的高度约束——很多时候 height: auto 看似安全，实则切断了所有交叉轴对齐的物理基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
