Flex布局实现侧边栏固定宽、主内容自适应：容器设display: flex和height: 100vh；侧边栏用flex: 0 0 240px；主内容用flex: 1且overflow-y: auto；响应式收起用max-width过渡；IE11需用flex: 1 1 0并确保高度链完整。
侧边栏用 flex 固定宽度，主内容自动撑满剩余空间
Flex 布局是目前最直接、兼容性足够（IE10+）的方案。关键不是“固定”侧边栏，而是让主内容区域用 flex: 1 占据剩余空间，侧边栏用固定宽或 flex: 0 0 auto 防止被压缩。
常见错误是给侧边栏设 width 后没控制主内容的伸缩行为，导致主内容不占满、或在小屏下溢出。
- 容器必须设
display: flex，且高度要有明确来源（比如height: 100vh或父容器有高度） - 侧边栏推荐用
flex: 0 0 240px（不伸缩、不收缩、基础宽 240px），比单纯width: 240px更健壮 - 主内容区域必须设
flex: 1，这是自适应的核心 - 避免给主内容设
width或min-width，否则会干扰 flex 计算
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex: 0 0 240px;
background: #f0f0f0;
}
.main-content {
flex: 1;
overflow-y: auto;
}
侧边栏需要响应式收起时，用 flex + max-width 控制折叠逻辑
纯 flex 本身不提供“隐藏/显示”能力，但可以配合类名切换和 max-width 实现平滑收起。重点在于：收起时不能靠 display: none，否则 flex 会重排，影响动画；要用 max-width: 0 + overflow: hidden 配合过渡。
- 收起状态：侧边栏设
max-width: 0、padding: 0、border: none，并加transition: max-width 0.3s ease - 展开状态：恢复
max-width: 240px（或用flex-basis） - 主内容区域保持
flex: 1不变，它会自动响应侧边栏宽度变化 - 注意：IE 不支持
max-width过渡，如需兼容 IE，改用transform: translateX()配合visibility
主内容滚动条只出现在主区域，而不是整个页面
默认情况下，如果 .main-content 没设高度限制，它会随内容撑开，滚动条会出现在 body 上。要让滚动仅限主内容区，必须切断其高度继承链。
立即学习“前端免费学习笔记（深入）”；
-
.main-content必须设overflow-y: auto（或scroll） - 它需要一个明确的“最大可用高度”，通常来自父容器（
.container）的height: 100vh，且自身不能有height: 100%（这在 flex 里容易失效） - 如果主内容内有 header/footer，建议用嵌套 flex：主容器 flex-column，再把 header/main/footer 分层，避免计算高度
- 慎用
position: absolute覆盖滚动逻辑，容易破坏 flex 流式特性
IE11 下 flex: 1 失效的典型表现和修复
IE11 对 flex: 1 的解析有 bug，尤其当父容器没有显式 flex-direction 或子元素有 min-width 时，主内容可能不伸展，甚至溢出。
- 强制写全
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），IE11 对flex-basis: 0的处理更稳定 - 确保侧边栏没有
min-width，否则 IE 可能拒绝压缩主内容 - 如果仍异常，临时加
.main-content { min-width: 0; }，防止 IE 错误继承最小宽度 - 不要依赖
calc()计算主内容宽度，IE11 在 flex 里对 calc 支持不稳定
真正麻烦的不是布局本身，而是高度来源是否可靠——很多问题其实出在 html 和 body 没设 height: 100%，或者中间某层父容器用了 display: inline-block 断掉了高度继承链。
