最稳写法是侧边栏用 flex: 0 0 240px（禁缩放），主区用 flex: 1（等价 flex: 1 1 auto），父容器需 min-height: 100vh，主区加 box-sizing: border-box 防溢出。
用 display: flex 实现左固定右自适应最稳写法
直接给结论：flex: 0 0 240px 控制侧边栏，flex: 1 控制主内容区——这是当前兼容性、可维护性和响应式表现最平衡的方案。
常见错误是只写 width: 240px，但默认 flex-shrink: 1 会让它在窄屏下被压缩；必须显式加 flex-shrink: 0，而 flex: 0 0 240px 就是一次性声明了不放大、不缩小、基准宽 240px。
-
flex: 1等价于flex: 1 1 auto，不是flex: 1 1 0——后者在 Safari 旧版或某些嵌套场景下会触发最小内容宽计算异常，导致主区域塌缩 - 父容器必须有高度来源，比如
min-height: 100vh或继承自body的明确高度，否则 flex 项可能高度为 0 - 主区域若加了
padding后溢出横向滚动条？必须加box-sizing: border-box，否则 padding 会额外加在 flex 分配宽度上
用 grid-template-columns 写更直白的两栏
如果布局结构简单、不需要嵌套 flex 或兼容 IE11 以下，grid-template-columns: 240px 1fr 是最干净的选择——它不依赖父容器 width，也不怕缩放抖动。
1fr 不是 “100%”，而是“减去 240px 后的剩余空间”，哪怕容器宽 1200px，主栏就是 960px；三栏只需写成 240px 1fr 300px 即可。
立即学习“前端免费学习笔记（深入）”；
- 别在主区域上再设
width: 100%或max-width，这会覆盖1fr的分配逻辑 - 避免用
margin-left模拟留白，那是补丁，不是布局 -
gap在 Grid 中可用，但在 Flex 布局中老版本浏览器（IE11/旧 Edge）不支持，只能靠margin
为什么 calc(100% - 240px) 容易翻车
这种写法看似直观，实际在嵌套容器、缩放、字体加载重排或 viewport 变化时极易错位——因为 100% 是相对其包含块计算的，而包含块可能不是你预期的父容器。
更麻烦的是：当主区域内容撑高、侧边栏高度不一致时，calc 不参与高度对齐，容易出现底部对不齐、footer 错位等问题。
- 响应式断点里改
calc值要同步改多处，维护成本高 - 如果侧边栏用了
border或padding，你还得手动把它们也从100%里扣掉，一漏就溢出 - Flex 和 Grid 都原生支持 px + fr / flex-basis 混合，没必要自己算
响应式隐藏侧边栏的关键控制点
小屏下想把侧边栏收起（比如变成汉堡菜单），不能只靠 display: none——那样会破坏 flex 或 grid 的流式计算，主区域可能突然占满全宽、内容错位。
正确做法是保留 DOM 结构，仅控制尺寸收缩：
- Flex 下：把侧边栏的
flex-basis改成0，并加overflow: hidden和opacity: 0实现平滑收起 - Grid 下：用
grid-template-columns: 0 1fr替换240px 1fr，浏览器会自然重分配空间 - 无论哪种，都要记得给主区域加
min-width: 0（尤其在 IE11 下），否则它可能因内部文本过长而撑破容器
真正难的不是写出能跑的代码，而是让侧边栏在各种缩放、嵌套、文字长度变化、甚至 font loading 重排后仍不抖动——关键就在 flex-shrink: 0、min-width: 0 和 box-sizing: border-box 这三个地方，少一个都可能在某个用户那里崩掉布局。
