答案：用display: flex实现两栏自适应布局最稳妥，父容器设display: flex和min-height: 100vh，侧栏设width: 240px和flex-shrink: 0，主内容区设flex: 1；IE11需改用flex: 1 1 0%并避免width与flex混用。
用 display: flex 实现两栏自适应布局
直接用 display: flex 是目前最稳妥、兼容性好（IE11+）、代码量少的方案。不需要额外 wrapper 或浮动 hack，也不依赖 CSS Grid 的较新特性。
常见错误是把 flex 写在 <body> 上导致全局干扰，或漏写 flex-shrink: 0 导致窄屏下侧栏被压缩到看不见。
- 主内容区用
flex: 1（等价于flex: 1 1 0），自动撑满剩余空间 - 侧栏固定宽度（如
width: 240px）并加flex-shrink: 0防止被压缩 - 父容器必须设
display: flex，且高度至少由内容撑开，或显式设min-height: 100vh
<div class="layout">
<main>主内容</main>
<aside>侧栏</aside>
</div>
<p>.layout {
display: flex;
min-height: 100vh;
}
main {
flex: 1;
}
aside {
width: 240px;
flex-shrink: 0;
}侧栏固定、主区滚动的常见需求怎么写
很多后台页面要求侧栏始终可见、主内容区独立滚动——这不能靠 overflow: auto 往父容器上加，否则会滚整个布局。
关键点在于：滚动必须作用在 <main> 内部的子容器上，且要限制其最大高度。直接给 <main> 设 overflow-y: auto 通常无效，因为它的高度没被约束。
立即学习“前端免费学习笔记（深入）”；
- 给
<main>加max-height: calc(100vh - 60px)（减去 header 高度） - 或更可靠的做法：用
flex-direction: column套一层，让<main>成为 flex 子项再设overflow-y: auto - 避免用
position: fixed侧栏——它会脱离文档流，和 flex 布局冲突，且难响应式适配
需要响应式断点时，@media 怎么改不破坏结构
移动端通常要从左右两栏变成上下堆叠。很多人在媒体查询里反复改 display 类型，结果样式打架、优先级混乱。
推荐只在一个地方切换布局方向：保持父容器一直是 display: flex，仅通过 flex-direction 控制流向。
- 桌面端：
flex-direction: row（默认值，可省略） - 移动端：
@media (max-width: 768px) { .layout { flex-direction: column; } } - 侧栏
width在移动端自动失效（因 flex-direction 变了），无需单独重置 - 如果侧栏需隐藏，用
display: none而不是visibility: hidden，后者仍占 flex 空间
IE11 下 flex: 1 不生效怎么办
IE11 对 flex: 1 解析有 bug，常表现为侧栏宽度异常或主区不伸展。这不是兼容性开关问题，而是计算逻辑缺陷。
绕过方式很明确：不用缩写，拆开写三个属性，并补全 flex-basis。
- 把
flex: 1改成flex: 1 1 0%或更稳妥的flex: 1 1 auto - 确保父容器没有
min-width: 0（IE11 里它会干扰 flex 计算） - 如果用了
width同时又设flex，IE11 可能忽略 flex，建议侧栏只用flex-basis控制宽度
真正麻烦的不是写法本身，而是测试时容易忽略 IE11 下侧栏突然变宽或主区塌陷——得真机或 BrowserStack 验证，不能只看 Chrome 模拟。
