侧边菜单高度不自适应的根本原因是父容器缺乏高度基准，需设min-height: 100vh + display: flex；子项禁用height/min-height，仅用flex: 0 0 240px交由stretch控制；按内容高则用align-self: flex-start。
侧边菜单高度不随内容或视口自适应，根本原因不是属性没写对，而是高度上下文缺失——align-items: stretch 默认就生效，但没高度基准它就拉不动。
父容器必须设 min-height: 100vh + display: flex
侧边菜单作为 Flex 子项，它的“等高”完全依赖父容器提供可拉伸的基准。只写 height: 100% 没用，因为百分比需要上层有明确高度；只写 height: 100vh 会遮挡滚动内容。
-
html, body { margin: 0; padding: 0; height: 100%; }是必要前提，否则min-height: 100vh在某些嵌套场景下会失效 - 外层容器（如
.layout）必须同时设display: flex和min-height: 100vh，不能只选其一 - 避免在父容器上加
overflow: hidden，它会截断stretch行为，导致侧边栏“看起来没拉高”
侧边栏自身别设 height 或 min-height
给侧边栏加 height: 100% 或 min-height: 100vh 是典型误区：它会让侧边栏脱离 Flex 拉伸逻辑，变成独立撑高，和主内容区错位，且滚动时可能溢出。
- 侧边栏只需设
flex: 0 0 240px（固定宽度，不缩放），高度交由父容器stretch控制 - 如果侧边栏内部有绝对定位元素（比如悬浮按钮、徽标），加
min-height: 1px触发 BFC，防止高度塌陷 - 若需局部滚动（如菜单项太多），在侧边栏内层容器设
max-height: calc(100vh - 64px)+overflow-y: auto，而非直接作用在侧边栏根元素上
要“按内容高度”而不是“等高”，就关掉 stretch
很多场景其实不需要侧边栏被拉高——比如顶部有导航栏、主内容很长、侧边栏只是几条菜单，这时强行等高反而显得空荡。
- 给侧边栏加
align-self: flex-start，一句话禁用拉伸，它就只按自己内容高度显示 - 如果所有子项都要按内容高度，统一在父容器设
align-items: flex-start，比逐个加align-self更干净 - 注意：若侧边栏用了
flex: 1或flex-grow: 1，align-self可能被覆盖，优先检查flex值是否合理
最容易被忽略的不是 align-items，而是侧边栏里一张没设 max-width 的图片、一个没约束的 table，或者 box-sizing: content-box 下的 padding——它们会偷偷撑开整个 Flex 容器，让“本该等高的布局”突然错位。调试时先用 outline: 1px solid red 看真实占位，比盯着 CSS 属性更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
