必须对直接承载内容的子元素设min-width:0以解除其默认min-width:auto限制，否则子项宁可撑破布局也不收缩；该声明必须配合white-space:nowrap、overflow:hidden和text-overflow:ellipsis等样式同级作用于同一元素才生效。
父元素设了 min-width，子元素还是溢出，问题不在父容器“不够宽”，而在子元素自己“不肯缩”——必须对子项显式加 min-width: 0 才能打破默认收缩限制。
为什么 min-width 在父元素上完全无效
父元素的 min-width 只约束它自身的最小尺寸，和子元素能否收缩毫无关系。Flex 或 Grid 子项默认有 min-width: auto（即内容最小宽度），浏览器会优先保全文本、URL、内联块等不可折行单元，宁可撑破整个布局也不压缩子项。DevTools 里看 computed 样式，如果子项的 min-width 还是 auto，这就是根因。
-
min-width: auto是 Flex/Grid 规范定义的隐式最小尺寸，不是 bug，也不是遗漏 - 给父容器写
min-width: 300px或min-width: fit-content，反而可能加剧溢出——它让父容器更难被压缩，间接强化了子项的“撑开权” - 常见误操作：在
.grid-container或.flex-parent上写min-width: 0，这完全不作用于子项，纯属无效覆盖
min-width: 0 必须加在哪个元素上
必须加在**直接承载溢出内容的子元素本身**，且通常是那个用了 flex: 1 或放在 1fr 轨道里的 DOM 节点。例如结构为 <div class="flex"><div class="item"><span class="text">长文本</span></div></div>，那么 min-width: 0 得落在 .text 或 .item 上，而不是 .flex。
- Vue
<style scoped></style>中需用:deep(.text) { min-width: 0; }确保穿透 - React + styled-components 时，确认最终生成的 class 真实挂载到了目标 DOM 元素，而非高阶组件包装层
- Ant Design、Element Plus 等 UI 库的
Card、Descriptions.Item默认不带min-width: 0，得手动覆盖其内部文本容器 - 嵌套 Flex 时（如头像 + 文字 + 操作按钮），若文字区域要收缩，仅在外层
.item加不够——.item > .text也得单独加
只加 min-width: 0 为什么还是不省略、不换行
min-width: 0 只是解除收缩锁，不决定内容如何处理溢出。它解决的是“能不能缩”，不是“缩了之后怎么办”。漏掉任一配套样式，效果就中断：
-
white-space: nowrap必须和min-width: 0同级写在目标元素上；写在父级会被继承但失去“单行溢出”前提 -
overflow: hidden必须作用于**实际发生溢出的容器**——常有人错加在最外层 wrapper，结果子项照撑，只是被顶开了 -
text-overflow: ellipsis仅对块级或inline-block元素生效；<span></span>类行内元素必须加display: block或display: inline-block - 长无空格串（如哈希值、base64）需搭配
word-break: break-all或overflow-wrap: break-word，否则即使min-width: 0生效，内容仍横向溢出
Grid 布局里 minmax(0, 1fr) 比 1fr 更关键
即使子项写了 min-width: 0，如果轨道定义是 1fr（等价于 minmax(auto, 1fr)），浏览器仍会按内容最小宽度撑开轨道。必须把列定义改成 minmax(0, 1fr)，才能让 min-width: 0 真正起效。
-
grid-template-columns: 1fr 2fr→ 溢出风险高；应改为grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 使用
max-content列会强制按内容最大宽度计算，哪怕子项加了min-width: 0也无效 - Safari 对
word-break: break-all+ Grid 的支持曾有 bug，iOS 15+ 建议实测；若不行，降级用overflow-wrap: break-word -
min-width: 0写成min-width: 0px或min-width: 0%在旧版 Firefox/Safari 中可能被忽略，只用无单位的0
真正容易被忽略的点是：你改的那行 CSS，是否真的落在了 DevTools 里显示为“正在生效”的节点上？很多时候样式被更高优先级规则覆盖，或作用域没穿透，或写在了错误层级——先打开 DevTools 确认 computed min-width 是 0px，再往下调其他属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
