侧边栏固定宽度+主区flex:1是唯一可靠写法：.sidebar{flex:0 0 240px}锁定不缩放，.content{flex:1;min-height:0}确保占满剩余空间且可滚动，移动端用order调整顺序而非display:none。
侧边栏固定宽度 + 主区 flex: 1 是唯一可靠写法
直接设 width: 240px 然后指望主区自动填满，大概率失败——因为 width 会触发 min-width: auto，主区实际最小宽度变成内容宽度，而非剩余空间。
正确做法是让侧边栏走 Flex 控制流：
-
.sidebar { flex: 0 0 240px; }—— 不放大、不缩小、基准宽 240px -
.content { flex: 1; }—— 等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;，真正按比例占剩余空间 - 千万别用
flex: auto或flex: initial，它们在 Safari 和旧版 Edge 中对flex-basis的默认值处理不一致
主区域必须加 min-height: 0 才能滚动
常见现象：主区高度看起来正常，但内部长列表或表格不滚动，拖不到底部。根本原因是 flex 子项默认 min-height: auto，阻止了收缩，导致 overflow: auto 失效。
解决方法很明确：
立即学习“前端免费学习笔记（深入）”；
- 给主区容器（即
.content）加上min-height: 0 - 如果主区里有直接子容器（比如
.content > .inner），它也得设height: 100%，否则overflow不会生效 - IE11 必须写全
flex: 1 1 0，不能简写为flex: 1，否则解析成flex: 1 0 auto，高度塌陷
移动端不是 display: none，而是改 flex-direction + order
用 @media 把侧边栏 display: none，看似简单，实则破坏布局流：主区突然变宽，内部卡片间距错乱、按钮换行异常，还得额外重置 padding/margin。
更稳的响应式逻辑是保持 DOM 结构，只调整渲染顺序：
- 在小屏媒体查询中，把外层容器设为
flex-direction: column - 给侧边栏加
order: -1，让它排到顶部 - 给主区加
order: 1，自然下沉 - IE11 不支持
order，需降级为flex-direction: column-reverse配合margin-top模拟
侧边栏折叠时 flex-basis 不动？先检查 min-width: 0
JS 修改了 element.style.flexBasis = '64px'，但宽度没变，大概率不是 JS 写错了，而是被浏览器的隐式保护卡住了。
Flex 项默认有 min-width: auto，意思是“至少保证文字可读”，哪怕你设了 flex-basis: 64px，它也会撑开。
必须显式解除：
- 给侧边栏加
min-width: 0 - 配套加
overflow-x: hidden防止文字溢出 - 若内部还有子 flex 容器（如菜单项用了
display: flex），它们也得各自加min-width: 0 - 动画要平滑，初始和目标状态都得用具体数值（如
flex-basis: 240px→64px），禁用auto或fit-content
最易漏的是 min-height: 0 和 min-width: 0 —— 它们不常写，但一漏，整个布局就卡在某个浏览器里不动。不是代码没生效，是浏览器悄悄加了保护层。
