Flex项目溢出需协同设置min-width:0、word-break等属性，而非仅依赖flex-shrink；典型方案为flex:1;min-width:0;word-break:break-word。
当 Flex 项目内容超出父容器时，默认会撑开容器或溢出，而不是自动换行或缩小。关键不是靠 flex-shrink 单独“限制收缩”，而是要理解它和 flex-basis、min-width、white-space 等属性的协同作用。
flex-shrink 不是万能的收缩开关
flex-shrink 只在父容器空间不足时，按权重比例压缩项目——但它不会强制文本换行或截断。如果子元素内有长单词（如 URL）、未设置宽度限制或禁止换行，即使 flex-shrink: 1，内容仍可能溢出。
- 默认值是
flex-shrink: 1，已启用收缩，但需配合其他条件才生效 - 若子元素设置了
min-width: 0（或min-width: auto在某些浏览器中），才能真正允许收缩到接近零宽 - 纯文字内容需额外控制换行：
word-break: break-word或overflow-wrap: break-word
常用组合方案（推荐直接用）
解决溢出问题，建议按优先级尝试以下组合：
-
给 flex 项目加
min-width: 0：这是最常被忽略的关键点，尤其对包含文字的div、span等内联/无固有尺寸元素 -
控制文本行为：添加
word-break: break-word或overflow-wrap: break-word，让长单词可折行 -
避免禁用换行：检查是否误设了
white-space: nowrap，如有则移除或改为normal - 必要时加
overflow: hidden+text-overflow: ellipsis（需同时设white-space: nowrap和固定宽）
一个典型安全写法示例
适用于标题+描述类卡片中的文字区域：
立即学习“前端免费学习笔记（深入）”；
.flex-item {
flex: 1; /* 等价于 flex: 1 1 0% */
min-width: 0; /* 允许收缩到 0 */
word-break: break-word;
overflow-wrap: break-word;
}这样即使父容器很窄，文字也能折行，不会撑破布局。
慎用 flex-shrink: 0 的场景
如果某个子项你明确不想让它收缩（比如图标、固定宽度按钮），才设 flex-shrink: 0。但注意：设了它，该元素就完全不参与空间回收，可能导致其他项目被过度压缩甚至溢出——所以要通盘考虑所有子项的收缩意愿。
