父容器必须设 min-height: 100vh 且 display: flex，侧边栏才可等高；用 flex: 0 0 240px 替代 width: 240px 防压缩；需避免 height: 100vh 溢出、display: none 收起导致错乱，Grid 更简洁但 IE11 不兼容。
父容器没高度，align-items: stretch 就是摆设
侧边栏不随内容拉高，不是因为你忘了写 align-items: stretch——它本来就是 Flex 容器的默认值。真正卡住的是父容器：如果它没明确高度（比如 min-height: 100vh），子项根本不知道该往哪“拉”。浏览器看到的是“容器高度由内容撑开”，而内容又很短，结果就是侧边栏只按自己文字高度显示。
常见错误现象：.sidebar 里只有两行菜单，右边主内容滚动很长，但侧边栏始终矮着不动。
- 父容器必须同时满足：
display: flex+min-height: 100vh（别用height: 100vh，否则内容超长时会溢出不可滚动） - 侧边栏本身不用设
height、min-height或align-self，留空即可 - 检查父容器是否被嵌套过深，比如中间层加了
height: auto或没继承高度，导致实际渲染高度塌陷
flex: 0 0 240px 比 width: 240px 更稳
给侧边栏设固定宽度时，width: 240px 看似简单，但在 Flex 布局里可能被压缩——尤其当父容器空间紧张且没关掉 flex-shrink 时。而 flex: 0 0 240px 明确禁用缩放与增长，更可靠。
-
flex: 0 0 240px=flex-grow: 0+flex-shrink: 0+flex-basis: 240px - 主内容区用
flex: 1（等价于flex: 1 1 0），不是flex: 1 1 auto——后者会让它在内容变多时主动收缩，破坏等高 - 如果侧边栏内部有未约束的图片或表格，可能偷偷撑大整个容器，建议临时加
outline: 1px solid red查看真实占位
要“不等高”，反而得主动干预
很多人以为“自适应”就是“等高”，其实更常见需求是：侧边栏就按菜单/头像的实际高度来，别被右边长内容拉伸。这时候不是修 Flex，而是关掉它。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给侧边栏加
align-self: flex-start，一句话关闭拉伸，不影响主内容 - 若所有子项都要按内容高度，统一在父容器设
align-items: flex-start - 注意：
align-self对非 Flex 子项无效；若侧边栏同时用了flex: 1，align-self和flex规则会共同作用，优先级需实测验证 - 收起侧边栏时，别用
display: none——它会从渲染树移除，导致剩余栏仍等高但视觉错乱；推荐width: 0; overflow: hidden;配合transition: width 0.3s ease
Flex 不是唯一解，grid-template-columns 更省心
如果你只要左右两栏等高，且支持现代浏览器，display: grid 比 Flex 更直接：同一行内的网格项天然等高，不需要操心 align-items 或父容器高度来源。
- 父容器设
display: grid+grid-template-columns: 240px 1fr+min-height: 100vh - 左右栏顺序即 DOM 顺序，无需浮动、定位或额外 class 控制
- IE11 不支持
1fr和gap，真要兼容就回退用 Flex，别硬套 Grid 前缀 - Grid 下，
height写在子项上基本无效，等高由行轨道决定，别试图给.sidebar加height: 100%
最容易被忽略的点：等高从来不是侧边栏自己的事，它只是被动响应父容器提供的高度上下文。盯着子项调样式，不如先确认父容器有没有一个靠谱的 min-height。
