加border后主内容被挤压，根本原因是box-sizing未设为border-box导致实际宽度超预期，且flex-shrink未禁用、min-width: auto未重置。应统一设box-sizing: border-box，侧边栏用flex: 0 0 240px锁定宽度，主内容区加min-width: 0防撑破。
加 border 后主内容被挤压，不是 border 本身的问题，而是盒模型没对齐 + Flex 行为没锁死导致的连锁反应。
为什么 border 会让侧边栏“变宽”？
浏览器默认用 content-box 盒模型：你写 width: 240px，再加 border: 1px，实际占宽就是 240px + 2px（左右边框）。三栏并排、Flex 分配或百分比布局下，这点多出来的像素就足以触发换行或挤压主内容。
- DevTools 里看
Computed面板，如果box-sizing是content-box，问题就在这儿 - UI 框架（如 Ant Design）可能重置了
box-sizing，得用更具体的选择器覆盖 - 别只给侧边栏设
box-sizing: border-box，父容器和伪元素也得同步——否则父容器的padding还是会吃掉可用宽度
flex: 0 0 240px 必须写全，不能只靠 width
在 Flex 容器中，width 只是初始建议值。不显式关掉收缩，浏览器会在空间紧张时压缩侧边栏——哪怕它只有一行文字。
- 错：
.sidebar { width: 240px; }→ 默认flex-shrink: 1，照样被压 - 对：
.sidebar { flex: 0 0 240px; }→ 等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px; - 千万别写成
flex: 0 240px→ 浏览器会把240px当作flex-shrink值，变成flex-shrink: 240，压得更狠
主内容区必须加 min-width: 0
主内容区即使写了 flex: 1，遇到长 URL、未折行文本或表格时，仍可能撑破布局。这是因为浏览器默认 min-width: auto，优先保障内容可读性而非容器约束。
- 必须加：
.main-content { min-width: 0; } - IE11 下还需补一句：
overflow: hidden，否则flex: 1解析不稳定 - 如果主内容里有
<pre class="brush:php;toolbar:false;"></pre>或<code>，额外加white-space: pre-wrap防止整块溢出
响应式收起时别用 display: none 或 width: 0
点击按钮隐藏侧边栏，常见错误是直接设 display: none 或 width: 0。前者无法做过渡动画，后者在 Flex 下根本无效——宽度由 flex-basis 控制，不是 width。
- 正确做法：
.sidebar.collapsed { flex: 0 0 0; overflow: hidden; transition: flex-basis 0.3s ease; } - 主内容区保持
flex: 1不变，自动占满，无需任何额外样式 - 如果侧边栏内含图标+文字混合，记得检查
min-width: 0是否漏掉——它会影响 flex-basis 的解析精度
真正容易翻车的，不是 border 多那 2px，而是 min-width: auto、flex-shrink 默认开启、以及 UI 库悄悄覆盖 box-sizing 这几处隐性依赖。每改一处，都要去 DevTools 的 Computed 面板确认最终生效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
