min-width: 0 是为覆盖 flex 子项默认的 min-width: auto，该值会锁定子项最小宽度不小于内容（如长 url 或图片），导致 flex-shrink 失效；必须显式设为无单位的 min-width: 0 才能解除收缩限制，且仅对 flex 容器直接子元素生效。
min-width: 0 是为了覆盖 flex 子项默认的 min-width: auto
Flex 容器的直接子元素默认有 min-width: auto，它不是 0，而是“内容能完整显示所需的最小宽度”。一段无空格的长文本（比如 URL 或 base64 字符串）、一张未设 max-width 的图片，都会让这个 min-width: auto 被解析成远超父容器的像素值。结果就是：哪怕写了 flex: 1，子项也不收缩，文字溢出、按钮被挤走、横向滚动条出现。
加 min-width: 0 就是显式告诉浏览器：“别管内容多长，允许我从 0px 开始分配空间”。它不改变最终渲染宽度，只解除那个隐性的“不可压缩锁”。
- 只对 Flex 容器的**直接子元素**生效；内部再嵌套 flex，内层也要单独加
- 不能写成
min-width: 0px或min-width: 0%——只有无单位的min-width: 0在 Chrome 84+、Firefox 91+、Safari 14+ 全平台稳定 - DevTools 里检查 computed 样式，确认值已变成
0px，而不是auto或fit-content
为什么 flex: 1 不等于 min-width: 0
flex: 1 是简写，等价于 flex: 1 1 0%。问题出在 0%：它让浏览器尝试从“0% 父容器宽”推导初始尺寸，但此时内容尚未渲染，flex-basis 计算容易失准，尤其在 RTL 或东南亚文字场景下。而 flex: 1 1 0 中的 0 是明确的像素值，起点确定，配合 min-width: 0 后宽度分配才真正可控。
- 旧版 Safari 甚至把
flex: 1解析为flex: 1 1 auto，第二个auto就是min-width: auto的源头 -
flex-shrink: 0会彻底关闭收缩能力，和min-width: 0的意图冲突，务必检查并移除 - 替换元素（如
<img>、<input>）不响应min-width: 0，需额外配max-width: 100%或width
加了 min-width: 0 还是没截断文字？缺这三件套
min-width: 0 只是解锁收缩能力，不会自动显示省略号。要让 text-overflow: ellipsis 生效，必须同级配齐：
-
white-space: nowrap（单行截断）或overflow-wrap: break-word（多行换行） -
overflow: hidden（隐藏溢出部分） -
text-overflow: ellipsis（仅对nowrap有效） - 容器需为块级，且处于有明确宽度上下文（
min-width: 0在 flex 中就提供了这个前提）
漏掉任意一个，都可能看到文字撑开盒子、省略号不出现、或者只藏起来却不截断。
min-width 和 width 冲突时谁起作用
min-width 永远优先于 width。浏览器计算逻辑是：min-width ≤ 实际宽 ≤ max-width。只要 width 算出来的值小于 min-width，最终就取 min-width。
-
width: 200px; min-width: 300px;→ 最终宽是300px -
width: 100%; min-width: 400px;→ 在视口宽度 400px，可能触发横向滚动 - 百分比
min-width（如min-width: 50%）依赖父容器有明确宽度；若父容器宽度为 0，那50%就是 0
真正容易被忽略的是：这个规则只在“可压缩上下文”里起效——对 或 直接设 min-width 基本无效，它不参与视口收缩逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
