React结合Bootstrap5行列实现不破坏UI的完美水平滚动

• Bootstrap 自带的 .row 类默认设置了左右 -15px 的负外边距，嵌套在栅格列中时配合滚动属性很容易出现横向溢出，撑破外层容器。
• 你在 flex 滚动容器上设置的 white-space: nowrap 是用于控制行内元素换行的属性，对 flex 直接子项完全无效，还会干扰浏览器对 flex 布局的宽度计算。
• flex-nowrap 模式下的 flex 子项如果没有明确设置不收缩规则，多内容时宽度计算会和 Bootstrap 栅格列的百分比宽度规则冲突，要么被挤压变形要么撑破父容器。
• 滚动容器没有设置宽度约束，内容过多时会无限撑开父级的 .col-sm-10，直接打乱整体栅格布局。

1. 修复滚动容器样式 #

把原来的.flex-container-scroll样式替换成下面的代码，同时保留隐藏滚动条的逻辑，补全跨浏览器兼容：

.flex-container-scroll{
  /* 重置Bootstrap row的负外边距，避免无意义溢出 */
  margin: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  /* 匹配Bootstrap栅格的内边距规则，和其他栅格元素对齐 */
  padding: 0 15px;
  /* *关键：* 强制容器宽度受父级约束，不会被内容撑大 */
  width: 100%;
  max-width: 100%;
  /* 可选：加平滑滚动体验 */
  scroll-behavior: smooth;
}

/* 跨浏览器隐藏滚动条 */
.flex-container-scroll::-webkit-scrollbar{
  display: none;
}
.flex-container-scroll{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

2. 调整滚动子项样式 #

不要直接在滚动项上用Bootstrap自带的.col-sm-6类，栅格的百分比宽度规则在横向滚动flex容器下会出现计算偏差，新增专门的滚动项类：

.scroll-item{
  /* *关键：* 禁止子项被压缩，宽度按设置值生效 */
  flex: 0 0 auto;
  /* 默认和col-sm-6表现一致，占容器一半宽度 */
  width: 50%;
  max-width: 50%;
  padding: 0 15px;
}
/* 小屏适配：手机端每项占满容器宽度 */
@media (max-width: 576px){
  .scroll-item{
    width: 100%;
    max-width: 100%;
  }
}

3. 调整JSX结构 #

去掉冗余的类名，避免样式冲突：

<div className="row justify-content-center">
  <div className="col-sm-10">
    <div className="flex-container-scroll">
      {/* 动态渲染列表 */}
      {dataList.map(item => (
        <div className="scroll-item" key={item.id}>
          {/* 插入你的组件内容 */}
        </div>
      ))}
    </div>
  </div>
</div>

• 不要在flex布局的横向滚动容器上使用white-space: nowrap，该属性仅对行内/行内块元素生效，flex布局下通过flex: 0 0 auto控制子项不收缩即可。
• 如果不需要自定义滚动项宽度，也可以直接给子项设置固定宽度比如width: 300px，滚动效果会更稳定。
• 如果需要给滚动容器加左右内边距，不要给父级容器加overflow: hidden，否则会截断滚动到边缘的内容阴影等效果。

内容的提问来源于stack exchange，提问作者reactify