根本原因是flex子项默认min-width: auto，必须显式设min-width: 0并配合overflow: hidden、white-space: nowrap和text-overflow: ellipsis（或overflow-wrap: break-word）才能生效，且需作用于直系子元素并有宽度约束。

Chrome里Flex子项不收缩，根本原因是min-width: auto

Chrome（及其他现代浏览器）对Flex子项默认设min-width: auto，不是“没设最小宽”，而是按内容推算一个隐式下限：比如一串长URL、连续英文单词、图片原始宽。哪怕你写了flex: 1或width: 50%，它也卡死在这个宽度上，宁可横向溢出也不缩——这不是bug，是规范行为。

加min-width: 0必须配齐三件套才生效

只写min-width: 0常见现象：文本不省略、滚动条还在、flex: 1不占满剩余空间。真正起效需要同时满足：

Cn Password Generator

安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。

下载

• min-width: 0加在直系Flex子项上（不是父容器，也不是子项内部的嵌套元素）
• overflow: hidden作用于同一元素（裁剪动作必须发生在这里）
• white-space: nowrap + text-overflow: ellipsis（仅需省略号时；若要换行，则换用overflow-wrap: break-word）
• 该元素本身得有明确宽度约束，比如max-width: 100%或来自flex-basis的计算值

flex: 1 1 0比flex: 1更彻底压制内容撑开

两者都常用，但关键差异在第三个参数flex-basis：

• flex: 1等价于flex: 1 1 auto → 先按内容宽度定初始尺寸，再缩放 → 容易被单个长单词卡住
• flex: 1 1 0表示“初始宽度为0，全靠弹性系数分配” → 更早触发收缩，对长文本/URL更鲁棒
• Safari旧版本建议flex-basis: 0%兜底，但Chrome中flex: 1 1 0已足够

容易被忽略的坑：不是所有元素加了min-width: 0就能缩

图像、iframe等替换元素自带固有尺寸，min-width: 0只是解开了Flex层的锁，内容层还得单独控：

• <img>必须额外加max-width: 100%和height: auto
• 子项含display: inline-block或未设box-sizing: border-box时，padding/margin会悄悄加在弹性分配之外，导致总宽超限
• 移动端调试时，检查是否误设了min-width: -webkit-fit-content或min-width: fit-content，它们会覆盖min-width: 0
• 最常漏掉的是：overflow: hidden加错层级——它必须作用于实际发生溢出的元素，不是最外层wrapper

Chrome里Flex最小宽度问题的根子不在渲染引擎，而在你有没有显式覆盖那个隐藏的min-width: auto。它不报错、不警告，只默默撑破布局——所以查Computed Styles里的min-width值，比猜更可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！