使用 overflow: hidden 可裁剪溢出内容，适用于文本截断显示省略号；2. 确保 flex-shrink: 1 并设置 min-width: 0 使子元素可收缩；3. 推荐组合使用 overflow: hidden、text-overflow: ellipsis 和 min-width: 0 以保持布局稳定。
在使用 CSS Flex 布局时，子元素内容过长或尺寸过大可能会超出父容器，破坏页面布局。这种情况常见于文本内容、图片或固定宽度的元素。解决这个问题主要有两种方式：使用 overflow: hidden 或调整 flex-shrink 的行为。
1. 使用 overflow: hidden 隐藏溢出内容
当子元素的内容超出父容器边界时，可以通过设置父容器或子元素的 overflow: hidden 来裁剪溢出部分，防止布局被撑开。
说明：- 适用于你希望保持布局结构完整，但允许内容被截断的场景。
- 特别适合单行文本溢出显示省略号（text-overflow: ellipsis）的情况。
示例代码：
.container {
display: flex;
}
.item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这样，文本过长时会自动截断并显示省略号，不会影响父容器尺寸。
立即学习“前端免费学习笔记（深入）”；
2. 使用 flex-shrink 控制收缩行为
Flex 子元素默认可以缩小（flex-shrink: 1），但如果设置了 flex-shrink: 0 或固定宽度（如 width: 200px），就可能无法收缩，导致溢出。
建议：- 确保需要自适应的子元素保留默认的 flex-shrink: 1。
- 对不希望被压缩的元素再单独设置 flex-shrink: 0。
- 配合 min-width: 0 可强制允许内容区域收缩（尤其在嵌套 flex 容器中）。
关键代码：
.item {
flex-shrink: 1;
min-width: 0; /* 允许内容最小化，避免文本撑开 */
}
加上 min-width: 0 能让 flex 项突破内容的自然宽度限制，更好地响应空间变化。
3. 综合推荐方案
为了兼顾布局稳定性和内容可读性，推荐组合使用以上方法：
- 父容器设置 display: flex。
- 子元素设置 min-width: 0 和 flex-shrink: 1。
- 对文本类内容添加 overflow: hidden 和 text-overflow: ellipsis。
基本上就这些常用处理方式，合理搭配能有效避免 flex 子元素溢出问题。
