子元素高度没填满主因是父容器缺乏显式高度，需设min-height: 100vh并确保html/body有height: 100%，同时删除子元素的height/min-height/max-height，改用flex: 1配合父容器明确高度实现拉伸。
子元素高度没填满，90% 是因为父容器没显式高度，而不是 align-items: stretch 没写——它默认就开着。
父容器必须有可计算的高度
Flex 不生成高度，只分配已有空间。如果父容器 height 是 auto（比如普通 div），那它的交叉轴尺寸就是 0，align-items: stretch 就没东西可拉。
- 给父容器加
min-height: 100vh（比height: 100%更可靠，不依赖上层高度链） - 如果父容器在
body内，记得同步给html和body加height: 100%，否则后代的百分比高度会失效 - 用开发者工具检查父容器的 computed
height：如果是auto或0px，问题就卡在这儿了 - 避免只写
min-height: 100%——百分比必须有可计算的父级高度才能生效
子元素不能写 height / min-height / max-height
只要子元素显式写了 height、min-height 或 max-height（哪怕只是 min-height: 0），浏览器就会放弃 align-items: stretch 的拉伸逻辑。
- 删掉子元素上的
height: 100%——它在父容器高度未定义时算出来是0px，还会封死 stretch - 想保底高度？改用
min-height: 200px+align-items: stretch，既允许内容更多时自然增高，又不阻断拉伸 -
position: absolute的子元素完全脱离 flex 流，align-items对它无效；如需覆盖层，改用inset: 0+z-index，并确保父容器position: relative
flex-direction: column 下别碰 align-items 控高度
竖排布局时，主轴变垂直，交叉轴变水平。align-items: stretch 此时控制的是子项宽度，和高度无关。
- 想让子项填满父容器高度，优先用
flex: 1（等价于flex: 1 1 0%），让它在主轴上均分可用空间 - 确保父容器有明确高度（如
min-height: 100vh），否则flex: 1也没空间可分 - 避免在 column 布局里给子项设
height: 100%——它不会向上追溯到父容器高度，且容易引发循环计算
最容易被忽略的是嵌套 flex 容器：外层有 height: 100vh，中间一层只写了 display: flex，子项依然不撑高——因为中间层没声明 flex: 1，它只是个普通块级容器，不主动拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
