正确做法是父容器设display: flex，左侧用flex: 0 0 240px，右侧用flex: 1；右侧需box-sizing: border-box、max-height: 100%、min-height: 0且避免height: 100%嵌套。
左侧固定宽度，右侧占满剩余空间
Flexbox 实现这个布局的关键不是靠 flex-grow: 1 给右侧“撑开”，而是让左侧不参与伸缩、右侧主动吃掉剩余空间。很多人一上来就给两个子元素都设 flex: 1，结果左侧也被拉宽了——这是最常踩的坑。
正确做法是：父容器设 display: flex，左侧用 flex: 0 0 240px（即不放大、不缩小、基础宽度 240px），右侧用 flex: 1（等价于 flex: 1 1 0）。
-
flex: 0 0 240px比width: 240px更可靠，它能阻止 flex 项目被压缩或拉伸 - 右侧必须省略基础宽度（或设为
0），否则flex-grow不会生效；写成flex: 1 1 auto反而可能因内容撑开导致计算异常 - 如果左侧需要响应式（比如在小屏收起），别直接 display: none，而应配合
flex: 0 0 0+overflow: hidden，避免重排抖动
右侧内容溢出时滚动条只出现在右侧区域
后台布局里，左侧菜单不动，右侧主内容区要独立滚动，不能让整个页面滚。这时候不能只靠 overflow: auto，得锁死高度并切断 flex 项目的默认对齐行为。
常见错误是给右侧加 height: 100vh——这会让它超出父容器，导致双滚动条。真正该做的是让父容器有明确高度来源（比如 height: 100vh 或 min-height: 100vh），再让右侧用 overflow-y: auto 和 max-height: 100%。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
height: 100vh或由上层容器提供高度约束，否则100%无效 - 右侧需加
min-height: 0（或overflow: hidden），防止 flex 默认的align-items: stretch把它拉满导致无法滚动 - 避免在右侧内部用
height: 100%嵌套，容易触发循环依赖；优先用flex-direction: column+flex: 1分配内部区域
兼容性与 Safari 下的 flex-grow 异常
Safari 14–15 对 flex: 1 的解析存在 bug：当右侧元素含 border 或 padding 且未设 box-sizing: border-box 时，flex-grow 会算错剩余空间，导致右侧变窄甚至消失。
这不是 flex 原理问题，是渲染引擎在计算 basis 时把 padding/border 错当成了 content 宽度。
- 右侧元素务必加
box-sizing: border-box - 避免在右侧直接设
padding，改用内层容器承载；或者用margin替代（flex 不会把它计入 basis） - 老版 Safari（flex: 1 简写，可降级为
flex-grow: 1; flex-shrink: 1; flex-basis: 0
左侧带 logo 和折叠按钮时的宽度控制
真实后台中，左侧往往不是纯色块，而是含 logo、菜单、折叠按钮。折叠后宽度从 240px → 64px，此时仅靠 flex-basis 切换不够——transition 不生效，且文字突然截断难看。
关键在于把「折叠态」和「展开态」的尺寸差异，转化为 CSS 自定义属性 + flex-basis 的计算值，而不是硬切 class。
- 用
--sidebar-width: 240px和--sidebar-collapsed-width: 64px定义变量 - 左侧设
flex: 0 0 var(--sidebar-width)，切换时只改--sidebar-width值，CSS 自动过渡 - 文字隐藏用
overflow: hidden; white-space: nowrap，配合opacity或transform: scaleX(0)做平滑收起，比display: none更稳
min-height: 0。这两个点漏掉一个，整个布局就卡在“看起来差不多但滚动不对”或者“小屏下错位”的状态里。 
