小屏幕 Flex 布局溢出应组合使用 flex-wrap: wrap（允许多行）与 overflow-x: auto（支持滚动），按需选择：可换行则用 wrap，禁换行则用 nowrap + 横向滚动，并通过媒体查询响应式切换，注意宽度设置、子项收缩性及 iOS 兼容性。
小屏幕下 Flex 布局内容溢出，核心思路是：让子项能换行 + 容器自身可滚动，二者配合使用，而不是只靠其中一个。
用 flex-wrap: wrap 允许子项自动换行
默认情况下 flex 容器是 flex-wrap: nowrap，所有子项强行挤在一行，小屏必然溢出。改成 wrap 后，当空间不足时，子项会自动折到下一行。
注意：要确保父容器有明确宽度（比如 100%），且子项没有设置过大的 min-width 或固定宽高，否则仍可能无法换行。
-
推荐写法：
display: flex; flex-wrap: wrap; -
避免陷阱：子项别写
white-space: nowrap或flex-shrink: 0过度限制压缩
用 overflow-x: auto 让容器横向可滚动（仅当必须单行时）
有些场景不能换行（比如时间轴、标签栏），那就保留 nowrap，但给容器加横向滚动能力。
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
关键点：必须设置 overflow-x: auto（或 scroll），同时确保容器有固定宽度（如 width: 100%）且内部内容总宽超过它，滚动条才会生效。
-
基础组合：
display: flex; flex-wrap: nowrap; overflow-x: auto; -
提升体验：加
-webkit-overflow-scrolling: touch让 iOS 滚动更顺滑 -
隐藏多余滚动条（可选）：用
scrollbar-width: none（Firefox）和伪元素隐藏（Chrome/Safari）
响应式结合：小屏用 wrap，中大屏用 nowrap + auto
最实用的做法是媒体查询动态切换——小屏优先换行，大屏再恢复单行滚动或等比排列。
-
示例逻辑：
@media (max-width: 480px) { .container { flex-wrap: wrap; } }@media (min-width: 481px) { .container { flex-wrap: nowrap; overflow-x: auto; } } -
补充建议：搭配
gap替代 margin，避免换行后间隙错乱
额外检查点：避免常见失效原因
即使写了 flex-wrap 和 overflow，仍溢出？大概率是这些细节没处理好：
- 父容器未设
width或被祖先的min-width锁死 - 子项用了
flex: 0 0 auto或flex-basis: 100%导致不收缩 - 外层有
white-space: nowrap传染影响了 flex 子项文本 - iOS Safari 中，
overflow容器需加-webkit-overflow-scrolling: touch才启用惯性滚动
不复杂但容易忽略：flex-wrap 和 overflow auto 不是互斥方案，而是按需组合的两种策略。先判断业务是否允许换行，再选对应方式，最后补上响应式和兼容细节，基本就稳了。
