子元素撑破父容器的解决核心是：先设 min-width: 0 允许收缩，再设 flex-shrink: 1 实现弹性缩放，并依内容类型补充 word-break 或 flex: 1 1 0 等策略。
子元素撑破父容器，通常是因为内容过长（比如长单词、URL、未换行文本）或弹性项目默认收缩行为导致的。关键不是强行隐藏，而是让布局“聪明地适应”——用 flex-shrink 控制缩放意愿，配合 min-width: 0 打开收缩开关。
flex-shrink 默认值其实是 1，但可能不生效？
很多开发者以为设了 display: flex 父容器，子项就会自动换行或压缩，其实不然。弹性项目默认有最小尺寸保护机制：文本类内容（如 <span></span>、<p></p>）会按内容长度设定 min-width，即使 flex-shrink: 1 也拒绝缩小。
- 解决办法：显式设置
min-width: 0（对需要收缩的子元素） -
min-width: 0是“允许收缩”的前提，它覆盖浏览器对内联内容的默认最小宽度限制 - 搭配
flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0）效果更稳
长文本/URL 撑开容器？用 word-break + min-width 协同
纯靠 flex-shrink 无法打断超长无空格字符串（如 https://verylongurlwithoutanybreaks.com），必须配合文本断行策略：
- 给子元素加
word-break: break-all（粗暴但有效）或overflow-wrap: break-word（优先在单词内断行） - 同时确保该元素有
min-width: 0和flex-shrink: 1 - 示例：
div.flex-item { min-width: 0; flex-shrink: 1; word-break: break-all; }
图标+文字组合被挤压？别忘了 flex-basis
常见于按钮或卡片中「图标 + 文字」并排，文字突然被压成一团。问题常出在 flex-basis 的默认值（auto）让文字按内容定宽，挤压空间。
立即学习“前端免费学习笔记（深入）”；
- 把文字容器设为
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 这样它不再以内容宽度为基准，而是从零开始按剩余空间分配
- 图标容器保持固定宽高，不设
flex，避免参与弹性计算
基本上就这些。核心就两点：让收缩“可发生”（min-width: 0），再让它“愿意发生”（flex-shrink: 1），最后根据内容类型补上断行规则。不复杂但容易忽略。
