侧边栏写了width: 240px却被压缩，是因为flex子项默认flex-shrink: 1，width仅为建议值，真正生效的是flex-basis和flex-shrink；必须用flex: 0 0 240px显式禁用收缩并锁定基准宽度，同时主内容区需加min-width: 0才能占满剩余空间。
侧边栏写了 width: 240px 却被压缩，不是 Flex 失效，而是默认收缩行为没关掉——必须显式禁用 flex-shrink，否则浏览器会无视 width 值直接压扁它。
为什么 width 在 Flex 容器里不生效
Flex 子项的 width 只是初始建议值，真正参与空间分配的是 flex-basis 和 flex-shrink。所有子项默认 flex-shrink: 1，只要父容器宽度不够，它就按比例缩小，哪怕里面只有一行文字或一个图标。
-
flex-shrink: 1是“允许压缩”的开关，不是“建议压缩” - 只写
width: 240px不影响flex-shrink，等于没关开关 - 开发者工具里看 computed styles，
flex-shrink仍是 1 就说明没生效
正确写法：用 flex: 0 0 240px 替代 width
这是最稳妥、无歧义的写法，等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 240px，三者缺一不可。
- 别写
flex: 0 240px——浏览器会把240px当成flex-shrink值，实际变成flex-shrink: 240，压得更狠 - IE11 下需额外补
width: 240px和flex-basis: 240px，否则不认 - 如果侧边栏含图片或长文本，还得加
min-width: 0防止内容自身撑开
主内容区为啥没占满？漏了 min-width: 0
flex: 1 要想撑满剩余空间，前提是它不被内部内容卡住。未约束的 URL、<pre class="brush:php;toolbar:false;"></pre> 或表格会触发 min-content 限制，导致无法伸展。
- 主内容区必须加
min-width: 0，等于告诉浏览器：“别管我里面有多长的字符串，我最多只能占到剩余宽度” - IE11 下还需配合
overflow: hidden，否则flex: 1解析不稳定 - 别用
calc(100% - 240px)混合 Flex——两者计算逻辑冲突，缩放、字体加载、嵌套都会让结果偏移
响应式收起侧边栏时，别用 display: none 或 width: 0
这两种写法都会破坏 Flex 布局流：display: none 无法过渡动画；width: 0 在 Flex 下基本无效，因为宽度由 flex-basis 控制。
- 正确做法是切换
flex值：.sidebar.collapsed { flex: 0 0 0; overflow: hidden; transition: flex-basis 0.3s ease; } - 主内容区保持
flex: 1不变，自动占满全宽，无需额外样式 - 小屏下若所有
flex-shrink: 0元素加起来超 viewport 宽度，浏览器只会加横向滚动条——这时得靠媒体查询切回flex: 0 1 auto或改用垂直堆叠
真正容易翻车的，是侧边栏内长文本、图标+文字混合、以及没意识到 flex-basis 和 min-width 的协同关系——它们不写在一行里，但缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
