根本原因是父容器（html/body）未设高度导致百分比高度和align-items: stretch失效；需设min-height: 100vh并删子元素height: 100%，改用flex: 1实现等高。
根本原因不是 Flex 写错了，而是父容器（尤其是 html 和 body）没设高度，导致所有百分比高度和 align-items: stretch 失效。
为什么 height: 100vh 在 Flex 子元素里“变矮”了
看起来写了 height: 100vh，但子元素背景只包住文字、computed height 是 0px 或 auto——这不是 vh 单位的问题，是浏览器在计算百分比时，必须逐层向上找“有明确高度的祖先”。一旦遇到 html 或 body 的 height 是 auto（默认值），整条链就断了。
- 只写
body { height: 100%; }没用：html不设高，body的100%仍无参照 -
min-height: 100vh比height: 100vh更稳妥：既保证至少撑满视口，又允许内容超出时自然延展 - 若用
position: fixed+top: 0; bottom: 0模拟全高容器，旧版 Firefox 和 Safari 14 前对inset: 0支持不全，务必补上top: 0; right: 0; bottom: 0; left: 0
为什么删掉子元素的 height: 100% 才能撑开
height: 100% 在 Flex 子项中是个陷阱：它不光可能算出 0px，还会直接关闭 align-items: stretch 的拉伸逻辑——哪怕父容器真有高度，只要子元素写了 height: 100%，浏览器就认定“你已接管高度”，不再执行 stretch。
- 典型错误：给
.sidebar或.main加height: 100%想等高，结果整个区域塌缩 - 调试时临时加的
height: 100%忘了删，后续怎么调align-items都没用 - 正确做法：删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 想等高？优先用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0）
嵌套 Flex 容器里 flex: 1 不生效的三个关键点
flex: 1 不是万能开关，它只在满足特定条件时才分配“剩余空间”：
- 父容器必须是
display: flex（或inline-flex），且主轴方向明确（flex-direction: column时填高度，row时填宽度） - 父容器自身必须有可计算的高度，比如
min-height: 100vh；如果只是display: flex+height: auto，那“剩余空间”就是0px - 嵌套的 Flex 容器（如中间一层
.content）必须显式加min-height: 0：现代浏览器会给 Flex 子项默认加min-height: auto，这会阻止它向下传递拉伸能力
竖排布局（flex-direction: column）下别碰 align-items 控高度
当 flex-direction: column 时，主轴是垂直方向，交叉轴是水平方向。align-items: stretch 此时控制的是子项**宽度**，和高度完全无关。想让子项填满父容器高度，得靠主轴行为——即 flex-grow: 1 或 flex: 1 1 0，前提是父容器有明确高度。
- 别给子项写
height: 100%：它不会向上取到父容器计算后的高度，反而阻断flex-grow，还可能引发循环计算 - 子项内有
overflow: auto或嵌套 Flex 容器时，浏览器默认加min-height: auto，必须显式覆盖为min-height: 0 - 需要滚动的区域，推荐组合：
flex: 1+min-height: 0+overflow: auto
最容易被忽略的是嵌套层级：外层有 height: 100vh，中间一层只写了 display: flex，子项依然不撑高——因为中间层没声明 flex: 1，它只是个普通块级容器，不主动拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
