flex项内容撑开容器的典型表现是子项未设宽度限制时，浏览器默认让其伸展导致父容器被撑破；根本原因是min-width默认为auto，而min-width: 0才是解除最小宽度保护、实现收缩的关键。
flex项内容撑开容器的典型表现
当你用 display: flex 布局，子项里塞了长文本、URL 或图片，却没设宽度限制时，浏览器默认会让 flex 项尽可能伸展——哪怕撑破父容器或破坏布局。常见现象包括：横向滚动条意外出现、其他 flex 项被压缩到看不见、响应式断点失效。
根本原因是 flex 项的 min-width 默认是 auto，浏览器会优先保障内容可读性，而不是布局约束。
为什么 min-width: 0 比 width: 0 更可靠
width: 0 看似能“重置”宽度，但它只是初始值，一旦内容有内在尺寸（比如一段 200px 宽的英文单词），flex 仍可能把它撑开；而 min-width: 0 是直接解除浏览器对 flex 项的最小宽度保护，允许它收缩到比内容还小——这是 flex 布局中真正起效的开关。
实际使用中优先选 min-width: 0，除非你明确需要配合 width + overflow 做截断控制。
立即学习“前端免费学习笔记（深入）”；
- 对文字类 flex 项，加
min-width: 0后，再配overflow: hidden+text-overflow: ellipsis才能生效 - 对图片或内联块元素，
min-width: 0配合max-width: 100%可防溢出 - 不要只在父容器写
flex-shrink: 1，子项不设min-width: 0，它照样不缩
哪些场景必须手动加 min-width: 0
不是所有 flex 项都需要，但以下情况几乎必踩坑：
- Flex 容器里嵌套了
display: inline-block或含white-space: nowrap的文本块 - 用
flex: 1分配剩余空间，但某一项内容不可控（如用户输入、API 返回的长链接） - 在表格类布局中用 flex 模拟列，其中一列要固定宽度，其余自适应
- 使用 CSS-in-JS（如 Emotion）时，样式作用域隔离导致
min-width没透传到真实 DOM 节点
示例：一个三栏 flex 布局，中间项显示动态标题
.container { display: flex; }
.left { flex: 0 0 60px; }
.main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { flex: 0 0 44px; }
兼容性和副作用要注意什么
min-width: 0 在所有现代浏览器（Chrome 21+、Firefox 20+、Safari 9+、Edge 12+）都支持，IE10/11 也 OK。唯一要注意的是它会影响 align-items: stretch 的默认行为——如果子项本身没有高度，又设了 min-width: 0，它不会因此变矮，但若同时设了 height 或 min-height，得确认是否覆盖了预期。
容易被忽略的一点：当 flex 项是 <img> 或 <canvas> 这类替换元素时，它们自带固有宽高，min-width: 0 单独不够，还得加 max-width: 100% 和 height: auto 才真正可控。
