CSS Flex 子元素撑破容器怎么处理

做一个“左侧固定、右侧自适应”的 Flex 页面时，最容易遇到的现象是：父容器明明只有一屏宽，右侧内容却把页面顶出横向滚动条。先给结论：如果子项应该随着父容器变窄，通常要给这个子项加上 min-width: 0；如果里面还有长 URL、代码串或不允许换行的标签，再单独处理换行或局部滚动。只写 overflow: hidden，往往只是把问题藏起来。

为什么 flex 子项会把父容器撑破

问题常出现在下面这种结构：侧栏有固定宽度，主内容使用 flex: 1。普通中文段落很容易换行，所以看起来一切正常；一旦内容换成很长的 URL、哈希值、代码片段或 white-space: nowrap 的标签，主内容就可能拒绝缩到分配给它的宽度以内。

原因在于 Flex 子项的自动最小尺寸不是简单的“零”。在常见情况下，它会参考子项的建议尺寸或内容的 min-content 尺寸。不可断开的字符串越长，这个下限越大，flex-shrink: 1 也不能把它压到下限以下。父容器没有失效，是子项的最小尺寸仍然高于可用空间。

先用 min-width: 0 解除内容区的收缩限制

对于“侧栏固定、正文占剩余空间”的布局，把 min-width: 0 放在真正需要收缩的 Flex 子项上，而不是随手加到父容器：

.layout {
  display: flex;
  gap: 16px;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  /* 允许内容区小于自身的 min-content 宽度 */
  min-width: 0;
  /* 占用剩余空间，同时允许收缩 */
  flex: 1 1 auto;
}

这一步只解决“子项不肯缩”的问题，不负责改变长字符串的显示方式。设置后，内容区可以先回到父容器的可用宽度；之后是换行、截断，还是让某一块横向滚动，要由内容语义决定。

min-width: 0 之外还要处理什么

如果溢出来自普通文本，可以给内容区补充：

.content {
  /* 先允许 Flex 子项收缩 */
  min-width: 0;
  /* 长 URL、哈希值等在必要处断行 */
  overflow-wrap: anywhere;
}

.content img,
.content video {
  /* 后代媒体不超过内容列宽 */
  max-width: 100%;
  height: auto;
}

.code-panel,
.wide-table {
  /* 代码和宽表格保留可读的横向滚动 */
  max-width: 100%;
  overflow-x: auto;
}

overflow-wrap: anywhere 适合链接、标识符等“必须完整保留但可以在显示层断开”的文本。代码和表格通常不应随意拆成难以阅读的字符，更合适的做法是让它们在自己的区域横向滚动。若使用 white-space: nowrap，要同步提供截断或滚动边界，否则它会重新成为最小宽度来源。

用这张清单定位横向溢出

1. 先在开发者工具中选中发生溢出的 Flex 子项，查看它的实际宽度和计算后的 min-width。
2. 临时加上 min-width: 0。如果父容器恢复正常，说明问题主要是自动最小尺寸。
3. 继续检查子项内部是否有 white-space: nowrap、固定宽度、宽表格、图片或长串文本。
4. 最后决定显示策略：正文换行，代码/表格局部滚动，媒体使用 max-width: 100%。

复查时不要只看桌面宽度。把视口缩到手机宽度，再检查侧栏是否允许折叠、内容区是否出现第二条横向滚动条。若必须保留宽内容，滚动应限制在内容组件内部，避免整页跟着横向移动。

常见问题

加了 flex-shrink: 1 还是撑破，为什么？

flex-shrink 只参与空间不足时的收缩，不能突破子项的最小尺寸。先检查自动 min-width 和不可断内容，再决定是否设置 min-width: 0。

所有 Flex 子项都应该写 min-width: 0 吗？

不必。固定侧栏、按钮组或需要保持完整宽度的控件可能不应该收缩；把它写在真正承担“剩余空间内容区”的子项上更稳妥。

overflow: hidden 能不能直接解决？

它会裁掉超出边界的内容，适合明确允许裁剪的装饰层，不适合作为长文本、代码和表格的通用修复。优先解除错误的最小宽度，再选择可读的换行或滚动方案。

相关参考：MDN min-width、MDN flex-shrink、MDN overflow-wrap。