侧边栏写了width: 240px却被压缩、主内容没占满，是因为flex中width仅为建议值，需显式设flex-shrink: 0或flex: 0 0 240px锁定宽度，并为主内容区添加min-width: 0以解除内容撑开限制。
侧边栏写了 width: 240px 却被压缩，主内容没占满——不是 Flex 不行，是没关掉默认的收缩行为，也没告诉浏览器“内容再长也别撑破”。
为什么 width: 240px 在 Flex 里不管用
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 为什么主内容不占满
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解析不稳定
别用 calc(100% - 240px) 混合 Flex
给主内容写 width: calc(100% - 240px) 是典型反模式。Flex 的空间分配逻辑和 CSS 计算值天然冲突。
-
calc()的100%基准是父容器宽度，但 Flex 子项宽度由flex-basis+flex-grow主导，两者不联动 - 缩放 125%、中英文混排、字体加载延迟都会让
calc()结果偏移，出现缝隙或重叠 - 嵌套在另一个 Flex 或 Grid 容器中时，
100%可能指向错误祖先，结果完全不可控 - 移动端横竖屏切换，
calc()不响应，而flex: 1天然实时重算
响应式收起侧边栏的正确姿势
点击按钮隐藏侧边栏，常见错误是设 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不变，自动占满全宽，无需任何额外样式
真正容易翻车的，是侧边栏内长文本、图标+文字混合、以及没意识到 flex-basis 和 min-width 在不同内容压力下的博弈关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
