正确写法是父容器设 display: flex 且 min-height: 100vh，侧边栏用 flex: 0 0 240px（即 flex-shrink: 0 锁定宽度），主内容区用 flex: 1 并在 IE11 下加 min-width: 0 和 overflow: hidden。
flex布局中left sidebar固定、right content自适应的正确写法
直接说结论：用 display: flex + flex-shrink: 0 控制侧边栏不缩，flex: 1 或 flex: auto 让主内容撑满剩余空间——但多数人错在没设父容器最小宽度或忽略了 min-width 的干扰。
为什么flex: 1有时不生效？常见三类干扰
不是 flex 本身有问题，而是它被外层约束“卡住”了：
- 父容器（比如
body或某个 wrapper）没设height: 100vh或min-height: 100vh，导致 flex 容器高度塌陷，flex: 1失去计算基准 - 侧边栏设置了
width但没配flex-shrink: 0，当内容区窄时，浏览器会压缩侧边栏（尤其 Chrome） - 主内容区子元素有
white-space: nowrap或固定宽的内联块，触发 flex 最小内容宽度（min-content）限制，导致无法收缩
flex-basis 和 width 混用时的实际表现
给侧边栏同时写 width: 240px 和 flex-basis: 240px 是冗余的；真正起作用的是：
- 如果只写
width，在 flex 容器中它仅作初始尺寸参考，仍可能被缩放 - 必须加
flex-shrink: 0才能锁死宽度，flex: 0 0 240px是最稳妥写法（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px） - 主内容区用
flex: 1即可，它展开为flex: 1 1 0，其中flex-basis: 0能避免内容宽度干扰分配逻辑
IE11兼容性下flex: 1失效的补救方式
IE11 对 flex: 1 解析不稳定，尤其嵌套 flex 或存在 max-width 时。不用 polyfill，直接降级处理：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏保持
flex: 0 0 240px不变（IE11 支持良好） - 主内容区改用
flex: 1 1 auto，并额外加min-width: 0（修复 IE11 中 flex item 默认最小宽度为内容宽度的问题） - 若仍异常，可在主内容区加
overflow: hidden强制触发 BFC，防止文字溢出撑破布局
最易被忽略的是：侧边栏内部如果有未约束宽度的图片、表格或绝对定位元素，会偷偷撑开整个 flex 容器，让“弹性”失效——检查时先临时加 outline: 1px solid red 看真实占位。
