flex子项加overflow:hidden不截断是因为min-width:auto阻止收缩；必须显式设置min-width:0才能启用裁剪和换行。
为什么flex子项加了overflow: hidden还是不截断
因为min-width: auto在拦路。Flex子项默认带这个值，它不是“0”也不是“fit-content”，而是浏览器根据内容算出的固有最小宽度——哪怕你写了overflow: hidden、text-overflow: ellipsis，只要这个最小宽度没被覆盖，元素就死活不肯缩，裁剪区域根本建不起来。
- 打开 DevTools → Elements → Styles → 查看该元素的
min-width计算值，如果显示auto（而不是你写的像素值或0），就是坐实了问题 -
min-width: 0必须写在目标子元素上（比如.title或.desc），不能写在父容器上 - 只能用
min-width: 0（无单位），min-width: 0px或min-width: 0%在部分浏览器中不可靠 - Firefox 对
min-width: auto执行最严格，Chrome 有时会“妥协”，但别赌
flex: 1为啥没让子项自动收缩
flex: 1看似能撑能缩，但它的收缩能力被min-width: auto直接封印了。Flex 规范明确说：“A flex item cannot be smaller than the size of its content along the main axis.” 换句话说，只要内容本身宽（比如一串无空格的 Base64、URL），flex-shrink就不会启动。
- 真正起效的组合是：
flex: 1 1 0+min-width: 0。其中flex-basis: 0（第三个参数）配合min-width: 0，才能让浏览器放弃内容宽度底线，进入 flex 收缩计算流程 - 只写
flex: 1不够，旧版 Safari 可能不认隐含的min-width: 0 - 如果子项同时设了
flex-shrink: 0，删掉它——和min-width: 0冲突，等于锁死宽度 - 嵌套一层
div就不管用：min-width: 0只对 flex 直接子元素生效
长单词、URL撑破容器时word-break为啥没反应
word-break: break-all或overflow-wrap: break-word不是开关，它们只在元素“允许换行”的前提下才工作。而min-width: auto让浏览器优先保全文本完整显示，连换行机会都不给——所以这些属性压根不触发。
- 正确顺序是：先用
min-width: 0解锁收缩，再让换行规则有机会介入 - 否则，浏览器宁可把父容器拉宽、出现横向滚动条，也不折那一行
- 对纯文本子项，推荐优先用
overflow-wrap: break-word（语义更合理），word-break: break-all作兜底 - 如果子项是
img，除了min-width: 0，还得加max-width: 100%和height: auto，否则图片可能变形或撑高
父容器没设width或max-width时，整个逻辑失效
父容器必须有width或max-width，否则“溢出”无参照，整个逻辑失效。Flex 容器自身无限宽，子项再怎么缩也没用。
- 常见漏点：忘了给父容器设
width或max-width，或者把overflow: hidden错加在错误层级上——它必须作用于实际发生溢出的容器，而不是最外层 wrapper - 若主轴是
column，对应要写min-height: 0，不是min-width - 子项若含
display: inline-block或未设box-sizing: border-box，padding/margin会悄悄加在弹性分配之外，导致总宽超限 - 移动端调试时，检查是否误设了
min-width: -webkit-fit-content或min-width: fit-content，它们会覆盖min-width: 0
min-width: 0，漏一层，就崩一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
