侧边栏真正固定宽度需设flex: 0 0 240px（即flex-shrink: 0），仅width: 240px无效；主内容区用flex: 1并配合min-height: 100vh和min-width: 0防塌缩与溢出。
flex布局下侧边栏如何真正“固定宽度”不被压缩
用width: 240px不够，它在Flex容器里仍可能被flex-shrink: 1（默认值）压缩。必须显式关闭缩放行为。
实操建议：
- 侧边栏写
flex: 0 0 240px，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px - 避免只写
width: 240px或flex: 1——前者不防压缩，后者会让它随内容撑开 - 如果侧边栏内有长URL或英文单词无空格，加
word-break: break-word防溢出 - 父容器必须设
display: flex，且不能是inline-flex（否则高度计算异常）
主内容区怎么填满剩余空间且不塌缩
flex: 1不是可选，是必须。它本质是flex: 1 1 0%，让主区以零基础宽度开始伸展，真正响应剩余空间。
常见错误现象：
- 写
flex: 1 1 auto→ 主区会按内容宽度起步，再伸展，导致窄屏下先挤再弹，视觉跳动 - 同时设
width: 100%→ 和flex: 1冲突，某些浏览器会忽略flex行为 - 漏掉父容器的
min-height: 100vh→ 内容少时主区高度塌缩，侧边栏背景断层
为什么侧边栏能“自适应高度”却看起来没拉满
这不是Flex失效，而是父容器没提供可靠高度来源。Flex子项等高依赖align-items: stretch（默认值），但它只能拉伸到父容器的**交叉轴尺寸**。
关键条件：
- 父容器必须有明确高度参照，比如
min-height: 100vh或height: 100%（后者需确保所有祖先都有高度） - 检查是否被CSS重置库覆盖了
align-items，用DevTools确认父容器computed值是stretch - 侧边栏自身若设了
height、max-height或align-self: flex-start，会主动退出等高 - 主内容区若有
min-width: 0，可防止其内部长文本撑宽整个flex容器
滚动行为怎么分治：侧边栏局部滚 + 主内容全局滚
两者滚动必须隔离，否则侧边栏菜单一滚动，整个页面就跟着跳。重点不是加overflow，而是限制它的作用范围。
实操要点：
- 侧边栏加
max-height: 100vh+overflow-y: auto，比height: 100vh更稳妥（避免header遮挡） - 主内容区保持
overflow: visible（默认），由body承担全局滚动 - 若父容器用了
display: flex但没设min-height: 100vh，侧边栏的max-height: 100vh会失效——因为100vh是相对于父容器高度，而父容器本身高度为auto - 在Safari中，避免对侧边栏同时用
transform和overflow，可能触发渲染bug
html和body的height: 100%，到父容器的min-height: 100vh，再到侧边栏的flex: 0 0 240px不干扰拉伸。任意一环断裂，等高就变成“看起来没拉满”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
