唯一可靠写法是侧边栏设 width: 240px（或 flex: 0 0 240px），内容区设 flex: 1；父容器必须 display: flex、flex-direction: row 且 min-height: 0；移动端用 flex-direction: column + order 调序，折叠动画需同步控制 flex-basis、min-width: 0 和 overflow。
侧边栏固定宽度 + 内容区 flex: 1 是唯一可靠写法
很多人用 width: 240px 配合 float 或 position: absolute 控制侧边栏，结果在 Safari、旧版 Edge 甚至某些 Chrome 版本里内容区不自适应、滚动条消失、高度塌陷。Flex 下最稳的组合只有两条：.sidebar { width: 240px; }（或 flex: 0 0 240px），.content { flex: 1; }。flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，它能真正填满剩余空间；千万别用 flex: auto 或 flex: initial，它们在不同浏览器下对 flex-basis 的默认值处理不一致，内容区宽度会忽大忽小。
父容器必须设 display: flex + flex-direction: row，且不能漏 min-height: 0
常见现象：侧边栏和内容区写了 flex，但内容区撑不满、滚动失效、高度为 0。根本原因是父容器没走 Flex 流程，或被隐式行为卡住。min-height: 0 是最容易漏的关键项——Flex 子项默认有 min-height: auto，它会阻止收缩，导致内容区无法响应高度变化。正确写法：
.main-layout { display: flex; flex-direction: row; min-height: 0; }- 不要把
display: flex加在body上，某些浏览器会干扰height: 100vh计算 - 外层整体容器（如
.app）应设display: flex; flex-direction: column;，确保顶部状态栏 + 主体区域纵向堆叠
移动端切换必须改 flex-direction，不是 display: none
单纯用 @media 把侧边栏设成 display: none，会导致 Flex 布局流中断：内容区突然变宽，内部卡片间距错乱、按钮换行异常、点击区域偏移。推荐做法是保持 DOM 存在，只调整渲染顺序：
- 小屏下给主容器加
flex-direction: column - 侧边栏加
order: -1，让它排到顶部 - 内容区加
order: 1，自然下沉 - 配合
width: 100%和flex-wrap: wrap，让子卡片自动单列排列
注意：IE11 不支持 order，若必须兼容，得降级为 flex-direction: column-reverse + margin-top 模拟。
立即学习“前端免费学习笔记（深入）”；
侧边栏折叠动画要同时控制 flex-basis、min-width: 0 和 overflow
JS 改了 element.style.flexBasis = '64px' 却没反应？大概率不是代码错，而是被以下任一条件拦住了：
- 父容器缺
display: flex或flex-direction: row - 侧边栏自己写了
width，直接覆盖flex-basis - 用了
flex: 1这类简写，重置了flex-basis值 - 没加
min-width: 0，长文本或图标撑开宽度
平滑动画需三要素：.sidebar { flex-basis: 240px; min-width: 0; transition: flex-basis 0.3s; } → .sidebar-collapsed { flex-basis: 64px; }，再配套 overflow-x: hidden 和 white-space: nowrap 控制文本截断。
