min-width: 0是解决右栏溢出的关键，它显式解除flex子项默认min-width: auto的隐式约束，使flex-shrink生效；必须加在右栏直接子元素上，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束才完整生效。
右侧内容撑开，本质不是“内容太多”，而是浏览器默认不主动断行、不收缩、不裁剪——flex: 1只分配空间，不管内容怎么填满它。
右栏溢出时 min-width: 0 必须加
这是最常被漏掉的一环。即使用了 flex: 1，只要右栏子元素（比如 <p></p>、<div> 或内联文本）自带最小宽度约束，整个右栏就会拒绝收缩，强行撑开父容器。
<ul>
<li>
<code>min-width: 0 是对 flex item 的显式“松绑”，告诉浏览器：“允许我缩到 0”
word-break 和 overflow-wrap 都可能失效长 URL / 连续无空格英文必须用 overflow-wrap: break-word
这类内容天然抗压缩，flex 不会自动处理，必须靠文本级断行控制。
- 优先用
overflow-wrap: break-word（标准写法），word-break: break-word是旧别名，部分 Safari 版本支持不稳定 - 别只靠
white-space: normal——它只对带空格的文本有效 - 如果内容是
<pre class="brush:php;toolbar:false;"></pre>或code标签，需额外加white-space: pre-wrap
右栏含表格或嵌套 flex 容器时要特别封边
表格默认 table-layout: auto，会无视父容器宽度；嵌套 flex 容器若没设 min-width: 0，会向上“传染”撑开行为。
- 表格必须加
table-layout: fixed+ 显式width: 100%，再配合col或第一行单元格设宽 - 嵌套的 flex 容器（比如右栏里再套一层
display: flex）也要加min-width: 0 - Safari 14–15 对盒模型更敏感，一个没封住的
border或padding就可能导致右栏错位甚至消失
flex: 0 0 250px 比 width: 250px 更关键
左栏写死 width: 250px 看似简单，但一旦右栏撑开或视口变窄，左栏可能被压缩（尤其含 padding 或 border），实际宽度超预期，进一步挤压右栏可用空间。
- 必须用
flex: 0 0 250px，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 250px - 必须配
box-sizing: border-box，否则padding和border会额外加宽 - 父容器一定要有明确宽度来源（比如
width: 100%或max-width: 1200px），否则flex分配无基准
真正卡住布局的，从来不是“右栏内容多”，而是几个隐性约束没对齐：父容器宽度是否明确、左栏是否真固定、右栏是否真允许收缩、内容是否自带抗断行特性——缺一不可。
