align-items: stretch 在 column 布局下控制子元素宽度而非高度；要填满父容器高度，需父容器有明确高度（如 min-height: 100dvh）并给子元素设 flex: 1，同时移除子元素的 height/min-height 并添加 min-width: 0 防止替换元素阻断伸展。
flex-direction: column 时 align-items: stretch 不管用
这不是 align-items 写错了，而是它根本不管“高度”——在 column 布局下，主轴是垂直方向，交叉轴变成水平方向，align-items: stretch 控制的是子元素的**宽度**，不是高度。所以你调它，对子元素高度毫无影响。
想让子元素填满父容器高度，得靠主轴行为：给子元素加 flex: 1 或 flex-grow: 1，前提是父容器有明确高度（比如 min-height: 100dvh）。
常见错误现象：align-items: stretch 明明开着，但子元素背景色只有一行高；开发者工具里看 computed height 是 auto 或很小值，说明没撑开。
父容器没高度，flex-grow 就是摆设
flex-direction: column 下，flex-grow: 1 填的是垂直方向的“剩余空间”，但浏览器不会凭空猜父容器该有多高。水平方向有 viewport 宽度兜底，垂直方向没有默认高度。
必须显式提供可计算的高度上下文：
-
min-height: 100dvh是首选（比100vh更稳，避开 iOS 软键盘缩 viewport） - 若父容器嵌套在
body内，html和body都得加height: 100%，否则百分比高度失效 - 别只写
min-height: 100%——它依赖父级已有高度，否则算出来是 0 - 用开发者工具检查父容器的
computed height：如果是auto或0px，问题就卡在这儿了
子元素写了 height/min-height，flex-grow 就自动让位
align-items: stretch 和 flex-grow 都只对“未显式设置交叉轴尺寸”的子元素生效。在 column 布局中，交叉轴是水平方向，所以 height、min-height、max-height 不会干扰它；但如果你误加了这些声明，反而可能阻断 flex-grow 的主轴伸展逻辑。
实操建议：
- 删掉子元素上的
height、min-height、max-height（包括min-height: 0） - 需要保底高度？改用
min-height: 200px+flex: 1，既允许内容更多时自然增高，又不阻断伸展 - 别用
height: 100%替代——它依赖父容器已有高度，在 flex 下易引发循环计算，结果常为 0
子项内有图片、输入框或长文本，必须加 min-width: 0
替换元素（如 <img>、<input>、<textarea></textarea>）和含长单词的文本，默认带 min-width: auto，会锁死最小宽度，导致 flex-grow: 1 在横向无法拉伸，或换行失败。
哪怕你只想要它在 column 布局下填满高度，只要子项内部有横向伸缩需求（比如一行文字要换行、一个搜索框要收缩），就得补上这个关键补丁：
- 给子元素加
min-width: 0 - 如果子项自己是 flex 容器且含滚动区，还得加
min-height: 0 - 避免同时写
width: 100%或max-width，它们优先级高于flex-grow，会直接覆盖伸缩逻辑
最易被忽略的点：父容器高度有了，子元素也写了 flex: 1，但背景还是没铺满——八成是子项里藏了个 <img> 或 <input type="search">，没加 min-width: 0，它正默默扛着默认最小宽度，把 flex 布局卡死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
