Flex子项默认不收缩到内容宽度以下是因浏览器强制设定「最小内容尺寸」下限，由最长不可折行内容（如长单词或图片）决定；该尺寸是flex-shrink的收缩极限，min-width: 0可覆盖此限制使收缩生效。
Flex子项为什么默认不收缩到内容宽度以下
浏览器对每个 flex 项会计算一个「最小内容尺寸」（minimum content size），它由内部最长不可折行内容决定，比如一个长单词 supercalifragilisticexpialidocious 或一张固定宽高的图片。这个尺寸是 flex-shrink 的收缩下限——哪怕容器空间严重不足，子项也不会缩得比它更小。结果就是：文字被强行撑开、布局错位、右侧溢出滚动条出现。
这不是 bug，而是规范行为。但开发者常误以为 flex-shrink: 1 就等于“能无限压缩”，忽略了这个隐式下限的存在。
- Chrome/Safari/Edge 都遵循该规则（旧版 Safari 曾有偏差，现已统一）
- 该尺寸与
width无关，只取决于内容本身可渲染的最小物理宽度 - 一旦子项宽度被压缩到该尺寸，
text-overflow: ellipsis就永远不触发——因为没真正溢出
为什么 min-width: 0 是最直接有效的解法
min-width: 0 不是“让元素变小”，而是显式覆盖浏览器默认的最小内容尺寸限制，把收缩下限重置为 0。这样 flex-shrink 才能真正按比例起作用，剩余空间也能被正确再分配。
比起 overflow: hidden（它只裁剪视觉，不改变 flex 计算逻辑），min-width: 0 更底层、更干净，且不会干扰其他样式。
- 必须加在 flex 子项上，不是 flex 容器
- 配合
flex: 1 1 0使用效果最稳（注意是数字0，不是0%） - 若子项内含图片或图标，仍需额外设
flex-shrink: 0+width防止拉伸
flex: 1 和 flex: 1 1 0 的关键区别在哪
flex: 1 是简写，等价于 flex: 1 1 0%。问题出在 0%：它会让浏览器尝试从“0% 容器宽度”开始计算基础尺寸，但此时内容尚未渲染，导致 flex-basis 计算异常，最终文字容器宽度不稳定，text-overflow 失效。
而 flex: 1 1 0 中的 0 是像素值，明确告诉浏览器“初始宽度为 0px”，后续所有空间分配都基于此起点，配合 min-width: 0 后，文字容器才能稳定获得可预测的可用宽度。
- 错误写法：
flex: 1; min-width: 0;→ 仍可能失效（因flex-basis是0%） - 推荐写法：
flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 若需保留一定初始宽度，改用
flex: 1 1 auto; min-width: 120px;
哪些场景下 min-width: 0 不能单独解决问题
单靠 min-width: 0 拦不住所有溢出。当子项本身包含不可压缩内容（如未设 max-width 的图片、未约束的长英文单词、未设 word-break 的表格单元格），收缩后依然会突破容器边界。
这时候要分层处理：先用 min-width: 0 解除 flex 收缩锁死，再针对内容类型补约束。
- 长英文单词：
word-break: break-word;或overflow-wrap: break-word; - 图片容器：
max-width: 100%; height: auto;+flex-shrink: 0（若需保持比例） - 嵌套 flex 容器：
min-width: 0要加在最内层文字容器上，不是外层 flex 包裹器 - 多行文本截断：
display: -webkit-box;等属性需配合固定高度，且min-width: 0仍要加
真正容易被忽略的是：这个最小内容尺寸不是静态值，它随子项内容动态变化。同一段 CSS，在不同数据下可能有时生效、有时溢出——所以测试必须覆盖各种长度的文案和媒体资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
