设置flex-wrap: wrap允许换行，结合overflow控制溢出滚动，可解决内容溢出问题。通过flex-wrap换行避免挤压，overflow:auto在必要时显示滚动条，常用于标签容器等固定高度场景。为防止横向滚动，应设置flex-shrink、合理使用min-width和max-width。正确组合二者提升布局适应性。
在使用 CSS Flexbox 布局时，flex-wrap 和 overflow 结合使用可以有效处理内容溢出的问题。当容器内的 flex 项目超出容器边界时，合理设置这两个属性能确保布局既美观又具备良好的用户体验。
flex-wrap 控制换行行为
默认情况下，flex 容器中的项目不会换行（flex-wrap: nowrap），所有项目会尝试挤在同一行，导致内容溢出容器。通过设置 flex-wrap: wrap，可以让项目在空间不足时自动换行。
- flex-wrap: nowrap：不换行，项目可能溢出
- flex-wrap: wrap：允许换行，向下拓展新行
- flex-wrap: wrap-reverse：反向换行，从下往上排列新行
例如：
.container {
display: flex;
flex-wrap: wrap;
}
overflow 处理溢出滚动
如果容器高度或宽度受限，即使设置了 flex-wrap，换行后整体尺寸仍可能超出容器范围。此时需要结合 overflow 属性控制是否显示滚动条或隐藏溢出内容。
立即学习“前端免费学习笔记（深入）”；
- overflow: visible：默认值，溢出内容可见
- overflow: hidden：隐藏溢出部分
- overflow: auto：必要时显示滚动条
- overflow: scroll：始终显示滚动条
常见场景：固定高度的标签容器，内部多个标签项可换行并允许垂直滚动：
.tag-container {
display: flex;
flex-wrap: wrap;
max-height: 100px;
overflow-y: auto;
}
避免横向滚动条出现
有时即使设置了 flex-wrap: wrap，仍可能出现意外的横向滚动条。这通常是因为子元素设置了固定宽度或最小宽度（min-width），导致首行无法容纳足够项目。
解决方法：
- 为 flex 项目设置 flex-shrink: 1 允许压缩
- 避免使用过大的 min-width
- 使用 max-width 限制项目最大宽度
- 考虑使用 flex-basis 控制基础宽度
示例：
.item {
flex: 0 1 200px; /* 不增长，可收缩，基础宽度200px */
}
基本上就这些。正确组合 flex-wrap 和 overflow，能让弹性布局在不同屏幕和内容量下都表现良好，既能自动换行又能控制滚动行为，提升页面适应性。关键在于理解主轴与交叉轴的扩展方向，以及何时让内容“流动”而非“溢出”。
