flex-nowrap 会强制子项单行排列并横向溢出，需配合 min-width: 0、white-space: normal 等修复溢出；它由显式类、hstack 或自定义 css 引入，非自动添加。
flex-nowrap 会让 Flex 容器拒绝换行，所有子项被强行塞进单行 —— 这不是 bug，是它本来的设计意图。一旦子项总宽度超过容器可用空间，就会横向溢出，触发浏览器滚动条，或撑破布局。
flex-nowrap 是谁加的？检查类名来源
Bootstrap 的 flex-nowrap 类等价于 flex-wrap: nowrap，但它不会自动出现。你得主动加，或者被某些组件/工具类间接引入：
- 直接写了
class="d-flex flex-nowrap"—— 明确禁用换行 - 用了
hstack（Bootstrap 5.3+）—— 它内部自带flex-nowrap，不支持换行 - 某些 UI 组件库封装了 Bootstrap，比如按钮组、标签栏，底层悄悄加了
flex-nowrap防止折行 - 自定义 CSS 中写了
.my-row { flex-wrap: nowrap !important }，覆盖了原本的flex-wrap: wrap
为什么加了 flex-nowrap 就横向滚动？
根本原因是：Flex 子项（如 .col、button、span）没有被压缩，也没有折行，只能硬挤。常见诱因包括：
-
.col内含长 URL、无空格字符串或未设min-width: 0，导致无法收缩 - 子项用了
white-space: nowrap或text-nowrap，文字拒绝换行 - 图片没加
img-fluid或max-width: 100%，原始尺寸远超容器 - 父容器本身宽度失控，比如
.row没被.container包裹，负 margin 溢出视口，再叠一层flex-nowrap就雪上加霜
怎么快速定位和修复？
别猜，用 DevTools 直接看“Computed”面板：
- 选中容器 → 查
flex-wrap最终值是不是nowrap（注意：源码写了不等于生效，得看 computed） - 选中溢出的子项 → 查
min-width是不是还是auto；如果是，加min-w-0（Tailwind）或min-width: 0（原生） - 临时删掉
flex-nowrap类，滚动条消失 → 基本锁定问题源 - 想保留水平排列但允许换行？换成
d-flex flex-wrap+gap-2，而不是死守flex-nowrap
真正难处理的不是 flex-nowrap 本身，而是它和 min-width: auto、white-space: nowrap、未约束的图片这三者叠加时，浏览器连“缩一缩”的机会都不给 —— 此时 overflow 已经不是样式问题，而是布局链彻底卡死。
