解决CSS容器被子元素撑开的关键是控制子元素扩展，通过设置父容器overflow: hidden、使用flex-wrap: wrap允许换行，并为子元素设置max-width和min-width: 0，结合word-break等文本控制，可有效防止宽度溢出，确保布局稳定。
当CSS容器的宽度被子元素“撕开”，通常是因为子元素内容过宽或使用了固定尺寸，导致父容器无法正常约束其宽度。这个问题常见于flex布局或内联元素场景中。解决的核心思路是：限制子元素的过度扩展，让容器保持预期宽度。
用 overflow 控制溢出
给父容器设置 overflow: hidden 或 overflow: auto，可以防止子元素撑开容器。尤其是配合 flex 布局时，能有效触发弹性收缩机制。
示例：父容器加上 overflow: hidden; 可以强制内容不溢出视觉边界，同时促使子项在必要时自动换行或缩小。
适用于单行文本溢出、图片过大等场景。
使用 flex-wrap 允许换行
在 display: flex 的容器中，默认 flex-wrap: nowrap，所有子元素强行排在一行，容易撕开容器。改为 flex-wrap: wrap 后，子元素会在空间不足时自动换行，避免横向溢出。
立即学习“前端免费学习笔记（深入）”；
建议写法：
- 父容器设置 display: flex; flex-wrap: wrap;
- 子元素设置 flex: 1 1 auto; 或指定最大宽度 max-width
这样既能保持弹性布局，又能防止宽度失控。
限制子元素最大宽度
子元素本身如果没有宽度限制（如图片、输入框、长文本），很容易撑开父级。可通过以下方式控制：
- 设置 max-width: 100% 防止图片撑破容器
- 对文本使用 word-break: break-all 或 white-space: normal
- 使用 min-width: 0 在 flex 子项中启用宽度收缩（关键！）
特别注意：flex 子项默认 min-width: auto，会阻止它缩到内容最小宽度以下。设为 min-width: 0 才能让它真正收缩。
基本上就这些方法，结合 overflow、flex-wrap 和子元素自身的宽度控制，就能有效防止容器被“撕开”。关键是理解 flex 的收缩机制和溢出处理逻辑。
