必须在flex直接子元素上设min-width: 0才能解锁收缩，否则flex-shrink不启动；它覆盖默认min-width: auto，使overflow:hidden、text-overflow:ellipsis等生效。
核心就一条：min-width: 0 必须加在子元素上，否则其他所有设置基本白搭。
为什么 flex 子项就是不收缩？
不是 flex-shrink 失效，而是它压根没机会运行。浏览器默认给每个 flex 子项设了 min-width: auto（水平布局）或 min-height: auto（垂直布局），意思是“宁可撑破父容器，也不能比内容窄”。一个长 URL、连续英文单词、未约束的 <img>，都会卡死整个收缩链。
-
min-width: auto是规范初始值，不是浏览器 bug，Chrome、Firefox、Safari 全都照做 - 写了
flex: 1或flex-shrink: 1却没用？先查 computed 值里min-width是不是真为0px - 父容器设了
width: 300px，但子项宽度显示为342px？大概率是子项没加min-width: 0，也可能是box-sizing: border-box没生效
text-overflow: ellipsis 在 flex 里为啥不画省略号？
不是属性失效，是裁剪区域根本没建立。省略号只负责“画三个点”，前提是：内容已被 overflow: hidden 裁掉一部分，而这个裁剪动作依赖于子项能真正变窄——所以 min-width: 0 仍是前提。
- 必须五点同时满足：
min-width: 0、flex: 1 1 0（注意是数字0，不是0%）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis -
overflow: hidden必须加在文本所在元素上，不是父容器；常见错误是加在<div class="item">上，但实际溢出发生在里面的<p> -
flex: 1等价于flex: 1 1 0%，会导致flex-basis参考内容宽度，建议显式写flex: 1 1 0
长 URL 或无空格英文还是撑开怎么办？
overflow-wrap: break-word 不是万能钥匙，它只在“内容超出可用空间”时才触发换行。而这个“可用空间”得先由 min-width: 0 解锁收缩权限，再靠 max-width 给出明确边界。
立即学习“前端免费学习笔记（深入）”；
- 顺序不能错：先
min-width: 0→ 再max-width: 100%（或具体值如300px）→ 最后overflow-wrap: break-word - 别混用
word-break: break-all：它会在任意字符间切分，比如把example.com拆成exa…，破坏可读性 -
<img>或<iframe>还需额外加max-width: 100%和height: auto，否则固有尺寸仍会溢出
最容易被忽略的是嵌套场景：如果子项内部还有 flex 容器，它的孙子项也要单独加 min-width: 0；移动端小屏下，min-width: 0 必须配 max-width: 100%，否则在 flex-direction: column 里仍可能水平溢出。
