Flex容器横向滚动的解决方法是：启用flex-wrap: wrap允许子项换行，设置子项为相对宽度（如flex: 0 1 33.333%或calc()配合gap），并检查父容器是否被外层样式限制宽度。
Flex容器出现横向滚动，通常是因为子项总宽度超出容器，又没换行，导致内容被强制挤在一行里溢出。解决核心是让子项能自动换行，并控制好每行能容纳几个子项。
用 flex-wrap: wrap 允许换行
默认 flex 容器的 flex-wrap 值是 nowrap，所有子项强行排成一行。只要改成：
flex-wrap: wrap;子项就会在空间不足时自动折到下一行，避免横向溢出。
子项宽度要设为相对值（如百分比或 flex-basis）
光加 wrap 不够——如果每个子项写死 width: 300px，而容器只有 500px 宽，第一行只能塞一个，第二个就换行，但若容器窄得只剩 200px，它仍试图占 300px，可能造成单个子项自身溢出或撑宽容器。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是让子项宽度随容器弹性变化，例如：
- 用 flex: 1（等分剩余空间）
- 用 flex: 0 1 30%（不放大、可缩小、基准宽 30%）
- 直接写 width: calc(33.333% - 10px) 配合 gap 使用
别忽略 gap 和 padding 的影响
设置了 gap: 12px 或子项有 padding，会占用额外空间。比如三列布局，若子项 width 写死 33.33%，加上左右 gap，实际总宽就超 100%。建议：
- 用 gap 替代 margin 分隔子项（更可控）
- 子项宽度按 calc((100% - 2 * gap) / 3) 这类方式计算
- 或直接用 flex: 0 1 calc(33.333% - 8px)（假设 gap: 16px）
检查父容器是否被意外限制宽度
有时候 flex 容器本身 width 被设为固定值（如 width: 600px），或受外层 min-width、overflow-x: hidden 影响，也会导致内部换行异常。可临时加：
outline: 1px solid red;确认容器真实尺寸，再排查是否外层约束过强。
基本上就这些。flex-wrap: wrap 是开关，子项宽度是关键，gap 和外层样式是常见干扰项——调顺这三点，横向滚动基本就消失了。
