Flex实现左侧固定右侧自适应布局：父容器设display: flex和height: 100vh；左侧用flex: 0 0 240px锁定宽度；右侧用flex: 1和min-width: 0确保自适应与防溢出。
用 Flex 实现左侧固定、右侧自适应的后台布局，核心是让左侧“锁死不伸缩”，右侧“主动吃掉所有剩余空间”，同时确保滚动、高度和响应式行为可控。
父容器必须设 display: flex 且有明确高度
后台布局常需整屏铺满、右侧独立滚动。所以父容器不能靠内容撑高，得显式声明高度来源：
- 设 height: 100vh（或由上层容器提供
height: 100%） - 避免只写
min-height: 100vh——flex 子项计算剩余空间时依赖确切高度 - 移除可能破坏 flex 上下文的样式：如
float、position: absolute、display: inline-block
左侧栏用 flex: 0 0 240px，别只写 width
width: 240px 在 flex 容器里仍可能被压缩（尤其小屏或 Safari 下），而 flex: 0 0 240px 是语义级锁定：
- flex-grow: 0 → 不放大
- flex-shrink: 0 → 不缩小
- flex-basis: 240px → 基准宽度就是 240px
- 可加
overflow: hidden配合文字截断，防换行错位
右侧主内容区必须加 flex: 1 和 min-width: 0
这是最容易出问题的环节。右侧不撑满、横向溢出、窄屏崩溃，八成缺了这两项：
-
flex: 1 等价于
flex: 1 1 0，从零开始分空间，不受内容原始宽度干扰 -
min-width: 0 —— 默认
min-width: auto会让长 URL、未换行文本强制撑开，导致横向滚动或布局破裂 - 加
box-sizing: border-box，防止 padding/border 被误算进分配空间 - 设
overflow-y: auto+max-height: 100%+min-height: 0，实现区域独立滚动
响应式收起侧边栏要平滑，别用 display: none
后台常需点击收起菜单。直接 display: none 会触发重排、焦点丢失、动画卡顿：
- 媒体查询中改
flex-basis：@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } } - 配合
transform: translateX(-100%)和overflow: hidden实现视觉隐藏 - 右侧保持
flex: 1，自动占满全宽，无需额外调整
