侧边栏写了width: 240px仍被压缩，是因为Flex容器中子项默认flex-shrink: 1，需显式设flex-shrink: 0或flex: 0 0 240px锁定宽度；仅设width无效，且IE11需同时声明width和flex-basis。
侧边栏写了 width: 240px 还是被压缩？关掉 flex-shrink
Flex 容器里，width 只是初始建议值，真正决定是否缩窄的是 flex-shrink。默认为 1，意味着只要容器变窄，浏览器就会主动压扁你写的侧边栏——哪怕它里面只有一行文字。
必须显式禁用收缩行为：
-
.sidebar { flex-shrink: 0; }最直白，但得配合flex-basis或width才能生效 - 更稳妥写法：
.sidebar { flex: 0 0 240px; }（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px;） - 别写
flex: 0 240px——浏览器会把240px当成flex-shrink值，实际变成flex-shrink: 240，压得更狠
主内容区用 flex: 1 为什么有时不占满？检查 min-width 和父容器高度
flex: 1 表示“尽可能撑开”，但它需要两个前提：有剩余空间可分，且自身不被内容卡住。
常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
min-height: 100vh或明确高度来源 → Flex 项失去计算基准，直接塌陷 - 主内容区含未约束的长文本、
<pre>或表格 → 浏览器按内容最小宽度（min-content）限制伸缩，导致无法填满 - 漏了
min-width: 0→ 加上这句，等于告诉浏览器：“别管我里面有多长的 URL，我最多只能占到剩余空间” - IE11 下需额外加
min-width: 0+overflow: hidden，否则flex: 1解析不稳定
为什么不要在 Flex 布局里混用 calc(100% - 240px)？
给主内容区写 width: calc(100% - 240px) 是典型反模式。Flex 的空间分配逻辑和 CSS 计算值天然冲突：
-
calc()的100%基准是父容器宽度，但 Flex 子项宽度由flex-basis+flex-grow主导，两者不联动 - 缩放 125%、中英文混排、字体加载延迟都会让
calc()结果偏移，出现缝隙或重叠 - 嵌套在另一个 Flex 或 Grid 容器中时，
100%可能指向错误祖先，结果完全不可控 - 移动端横竖屏切换，
calc()不响应，而flex: 1天然实时重算
响应式收起侧边栏时，别动 display 或 width
点击按钮隐藏侧边栏，常见错误是设 display: none 或 width: 0：
-
display: none无法过渡动画（CSS 中display不可动画） -
width: 0在 Flex 下基本无效——宽度由flex-basis控制，不是width - 正确做法：
.sidebar.collapsed { flex: 0 0 0; overflow: hidden; transition: flex-basis 0.3s ease; } - 主内容区保持
flex: 1不变，自动占满全宽，无需任何额外样式
真正容易翻车的，是侧边栏内部那个没加 max-width: 100% 的图片，或者没设 box-sizing: border-box 却带 padding 的主内容区——它们会在你调完所有 flex 属性后，悄悄把整个布局顶破。
