Flex容器溢出可通过flex-shrink和overflow解决。默认flex-shrink:1使子元素等比压缩，固定宽且flex-shrink:0时易溢出；允许多值调节压缩比例，配合flex-basis定义基准尺寸；内容需保留时用overflow:hidden隐藏或overflow:auto显示滚动条，文本场景推荐white-space:nowrap加text-overflow:ellipsis实现省略号；设计上建议用相对单位、设max-width、响应式调整方向并测试多屏适配，合理组合属性可有效控制溢出。
Flex容器内的元素溢出是常见布局问题，通常发生在子元素总宽度超过容器可用空间时。解决方式主要依赖 flex-shrink 和 overflow 属性的合理使用，根据实际需求选择合适方案。
理解 flex-shrink 的作用
默认情况下，flex 容器中的子元素会按比例缩小以适应容器，这得益于 flex-shrink: 1 的默认行为。若子元素未设置该属性或被设为 0，则不会缩小，容易导致溢出。
常见情况：- 设置了固定宽度（如 width: 200px）且 flex-shrink: 0 的元素不会压缩
- 多个固定宽元素并排时，总宽超出容器就会溢出容器右侧
- 允许压缩：确保关键子元素的 flex-shrink 未被禁用
- 控制压缩比例：可设置 flex-shrink 数值（如 flex-shrink: 2），数值越大，压缩越多
- 配合 flex-basis 使用：例如 flex: 1 1 auto 或 flex: 0 1 200px，让元素在必要时能缩
使用 overflow 控制溢出显示
当内容必须保留且不能过度压缩时，可通过 overflow 属性控制容器如何处理溢出部分。
常用选项：- overflow: hidden —— 隐藏溢出内容，适合轮播图、标签栏等场景
- overflow: auto —— 按需显示滚动条，适合内容动态变化的区域
- overflow-x: scroll —— 强制显示水平滚动条，适合表格或长标签列表
结合 white-space 处理文本溢出
文本类内容溢出常伴随换行问题。配合 white-space: nowrap 使用时，文字不换行，更容易导致横向溢出。
立即学习“前端免费学习笔记（深入）”；
推荐组合：- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
这样可在单行文本溢出时显示省略号，提升可读性。
避免溢出的设计建议
- 尽量使用相对单位（如 flex: 1）而非固定宽度
- 对不可压缩元素设置 max-width 限制最大尺寸
- 在响应式设计中，考虑使用媒体查询调整 flex 布局方向（如 flex-direction: column）
- 测试不同屏幕尺寸下的表现，及时调整 flex-shrink 和 overflow 策略
基本上就这些。灵活运用 flex-shrink 控制压缩行为，搭配 overflow 管理溢出显示，能有效解决大多数 flex 容器溢出问题。关键是理解每个属性的作用场景，按需组合使用。
