min-width: 0是必加项，因flex子项默认min-width: auto（即内容最小宽度），会死守不可折行内容的宽度下限，加min-width: 0才能显式覆盖该默认值，解除收缩限制，使flex-shrink生效。
flex子项溢出时，min-width: 0为什么是必加项
因为 Flex 子项默认 min-width: auto，浏览器会按最长不可折行内容（比如 https://example.com/very-long-path）算出一个“最小内容宽度”，并死守这个下限——哪怕容器只剩 1px，它也宁可撑破父容器，绝不缩小。加 min-width: 0 是唯一能显式覆盖该默认值的标准写法，它不设下限，把收缩权限交还给 flex-shrink。
常见翻车点：
- 写成
min-width: 0px或min-width: 0%，在旧版 Safari/Firefox 中可能失效 - 加在父容器上，而不是直接含文本的子元素（如
.item > span） - DevTools 里 computed 样式中
min-width还是auto，说明没生效或被其他规则覆盖
text-overflow: ellipsis不生效？缺这三样就卡死
text-overflow: ellipsis 只是“画省略号”的装饰层，它不参与尺寸计算，必须等所有前置条件满足才触发。漏掉任意一个，效果就消失：
-
white-space: nowrap必须写在目标元素上，不能靠父级继承；否则文字提前换行，根本没机会单行溢出 -
overflow: hidden只裁剪“已溢出”的内容；若min-width: auto还在锁着宽度，子项就被撑大，文本根本没溢出，这行 CSS 就等于没执行 -
display: block或display: inline-block：因为text-overflow仅对块级元素生效，<span></span>类行内元素必须先加这个
另外，必须有明确宽度约束——flex: 1 不够稳，推荐用 flex: 1 1 0 配合 min-width: 0，让基础宽度从 0 开始计算。
想让长文本自动换行而非省略，flex-shrink 为什么常失效
flex-shrink: 1 默认存在，但它只缩放盒模型尺寸，不会主动断开连续无空格字符串。所以即使写了 flex-shrink: 1，一段长 URL 仍会撑开整个子项。
要让它真正收缩并换行，必须组合：
-
min-width: 0：解除min-width: auto锁定 -
overflow-wrap: break-word（推荐）或word-break: break-all：前者优先在空格处断，后者强制任意字符处断 -
overflow: hidden：配合裁剪，避免换行后内容顶出容器底部
注意：white-space: nowrap 和 overflow-wrap 是互斥的，选其一即可——需要省略号就用前者，需要完整显示就用后者。
父容器加了 overflow: hidden 却还看到溢出，先查这三件事
加了 overflow: hidden 却无效，大概率是下面某个条件没满足：
- 父容器本身没设
width或max-width（比如只写了flex: 1，但外层没约束宽度，容器自己已无限宽） - 子项用了
white-space: nowrap但没配overflow: hidden，或者配了但没设宽度——overflow只对有尺寸限制的块级盒生效 - 子项是
<img>且没处理flex-shrink或max-width: 100%，此时overflow: hidden只能裁边缘，无法阻止容器被撑大
最常被忽略的是层级错位：把 overflow: hidden 加在最外层 wrapper 上，而实际发生溢出的是中间某一层 flex 容器——它必须作用于那个真正“装不下”的容器上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
