子元素撑破父容器的解决核心是：先设 min-width: 0 允许收缩，再设 flex-shrink: 1 实现弹性缩放，并依内容类型补充 word-break 或 flex: 1 1 0 等策略。

子元素撑破父容器，通常是因为内容过长（比如长单词、URL、未换行文本）或弹性项目默认收缩行为导致的。关键不是强行隐藏，而是让布局“聪明地适应”——用 flex-shrink 控制缩放意愿，配合 min-width: 0 打开收缩开关。

flex-shrink 默认值其实是 1，但可能不生效？

很多开发者以为设了 display: flex 父容器，子项就会自动换行或压缩，其实不然。弹性项目默认有最小尺寸保护机制：文本类内容（如 、

• 解决办法：显式设置 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），最后根据内容类型补上断行规则。不复杂但容易忽略。