如何设置内部div宽度为可滚动父div的100%？

要让内部div占满可滚动父div的全部宽度，只需调整内部flex容器的宽度设置，具体操作如下：

• 移除内部div的w-100和col-12类，这两个类会强制它限制在父容器的可视宽度内，无法跟随滚动内容延伸
• 给内部flex容器添加w-fit（Bootstrap 5.2+支持）或自定义min-width: fit-content，让它的宽度由子项总宽度决定，从而铺满滚动父容器的横向空间
• 保留flex-nowrap确保子项横向排列不换行（显式声明更稳妥）

修改后的代码示例：

<div class="col-6 flex-column gap-8px overflow-x-scroll">
  <div class="d-flex p-3 border bg-warning rounded flex-nowrap w-fit">
    <span class="col-4 bg-info m-2">col 1</span>
    <span class="col-4 bg-info m-2">col 2</span>
    <span class="col-4 bg-info m-2">col 3</span>
    <span class="col-4 bg-info m-2">col 4</span>
  </div>
</div>

如果你的Bootstrap版本不支持w-fit，可以用自定义CSS替代：

.inner-flex-container {
  min-width: fit-content;
}

然后给内部div添加该类：

<div class="d-flex p-3 border bg-warning rounded flex-nowrap inner-flex-container">

原理说明 #

原代码中w-100和col-12会将内部div的宽度固定为父容器的可视宽度，当子项总宽度超过可视宽度时，滚动区域的背景色无法覆盖超出部分。通过min-width: fit-content让内部div的宽度自适应子项总宽度，就能完全填充滚动父容器的横向空间，滚动时背景色也会跟随延伸。

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