根本原因是子项最小尺寸被内容撑开，如长单词、表格或未设min-width的图片；即使flex-shrink:1生效，浏览器也优先保障内容可读性，此时需加min-width:0激活收缩。
flex子项溢出时为什么加 flex-shrink: 1 还不管用？
根本原因不是 flex-shrink 没生效，而是子项的**最小尺寸被内容撑开**——比如长单词、<table>、未设 <code>min-width 的图片或内联块元素。浏览器默认会优先保障内容可读性，宁可溢出也不压缩到破坏内容的程度。
此时即使 flex-shrink: 1（默认值）开着，子项仍拒绝收缩。常见表现是右侧区域突兀地挤出父容器边界，滚动条意外出现，或文本直接撑破布局。
-
min-width: 0是关键开关：它告诉浏览器“这个元素允许被压到 0 宽”，从而激活flex-shrink的实际作用 - 仅对需要收缩的子项加，不要全局设在
body或容器上 - 配合
word-break: break-word或overflow-wrap: break-word处理长文本
为什么 flex: 1 有时反而导致溢出？
flex: 1 是 flex: 1 1 0% 的简写，其中 flex-basis: 0% 看似合理，但若子项内部有固定宽度元素（如 width: 300px 的卡片、table-layout: fixed 表格），它会以 0 为起点再叠加这些固有尺寸，最终超出预期。
- 检查子项是否隐含了不可压缩的尺寸来源：
width、min-width、white-space: nowrap、display: inline-block - 把
flex: 1换成显式写法flex: 1 1 auto，观察是否缓解——auto会让浏览器先按内容算基础尺寸，再分配剩余空间 - 更稳妥的做法：固定部分用
flex-basis（如侧边栏flex: 0 0 240px），自适应部分明确写flex: 1 1 0+min-width: 0
父容器没设宽度，子项的百分比 flex-basis 就是摆设
如果父容器本身没有明确宽度（例如只写了 max-width: 1200px 却没设 width，或父级是 inline-block），那子项的 flex-basis: 30% 实际参照的是“包含块”，而这个包含块可能是视口或某个意外祖先，导致计算失准、溢出或塌缩。
- 确认父容器有确定的主轴尺寸：直接设
width，或用flex-basis配合flex-direction: column时注意是高度约束 - 避免在浮动（
float）或inline-block父级里嵌套 flex 容器——它们不构成标准的块级包含块 - 调试技巧：临时给父容器加
outline: 1px solid red，看它的实际渲染宽度是否符合预期
文本省略与溢出隐藏必须手动配齐
单纯设 overflow: hidden 不足以让单行文本显示省略号；text-overflow: ellipsis 只在同时满足 white-space: nowrap 和 overflow: hidden 且容器有**明确宽度约束**时才生效。而 flex 子项的“明确宽度”恰恰容易被弹性逻辑绕过。
- 三件套缺一不可：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 但前提是该子项能被压到足够窄——所以仍要加
min-width: 0 - 多行省略不用
text-overflow，得靠display: -webkit-box+-webkit-line-clamp，同样依赖min-width: 0防止父级拒绝收缩
min-width 和内容类型，比反复调 flex-grow 值更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
