侧边栏写width: 240px仍被压缩，因flex默认flex-shrink: 1，需设flex-shrink: 0或flex: 0 0 240px锁定宽度；主内容flex: 1不占满是因父容器缺高度基准或未设min-width: 0。
侧边栏写了 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 class="brush:php;toolbar:false;"></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不变，自动占满全宽，无需任何额外样式
真正容易翻车的，是侧边栏内部未约束的长内容（比如未设 word-break 的 URL）和父容器缺失高度链——这两点不处理，flex: 1 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
