如何创建左侧固定最小宽度、右侧可滚动的响应式Bootstrap网格布局？

我已经实现了预期的外观与交互效果，但右侧列的滚动存在问题：滚动条已显示，却无法滚动右侧列的内容。

预期效果：

当前效果：

相关代码如下：

CSS代码 #

.scroller {
  overflow-x: scroll;
  white-space: nowrap;
}

.row {
  display: flex;
  flex-wrap: nowrap;
}

.col-md-4 {
  min-width: 240px;
}

.col-md-8 {
  flex-grow: 1;
}

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <div class="col-4" style="min-width: 240px;">
    <div class="row pb-1">
      <div class="col-3 offset-3">
        <b>NAME</b>
      </div>
    </div>
    <div class="row row-striped align-items-center pb-1 pt-1">
      <div class="col-3">
        <img src="https://media.api-sports.io/football/players/730.png" alt="player photo" width="40px" height="40px">
      </div>
      <div class="col-9 player-table-text">
        <div>
          Thibaut Courtois
          <span class="ps-1 player-number-text">1</span>
        </div>
      </div>
    </div>
  </div>
  <div class="col scroller" style="min-width: 500px;">
    <div class="row pb-1">
      <div class="col-2 offset-1">
        <b>POS</b>
      </div>
      <div class="col-2">
        <b>AGE</b>
      </div>
      <div class="col-2">
        <b>HT</b>
      </div>
      <div class="col-2">
        <b>WT</b>
      </div>
      <div class="col-2">
        <b>NAT</b>
      </div>
    </div>
    <div class="row row-striped align-items-center pb-1 pt-1 player-table-text" style="height:48px;">
      <div class="col-2 offset-1">
        GK
      </div>
      <div class="col-2">
        30
      </div>
      <div class="col-2">
        6' 7"
      </div>
      <div class="col-2">
        212 lbs
      </div>
      <div class="col-2">Belgium</div>
    </div>
  </div>
</div>

解决方案思路 #

思路1：修正Flex容器的溢出行为 #

外层.row作为Flex容器，默认会限制子元素宽度不超出自身，导致右侧.scroller的内容无法真正溢出触发滚动。需要给外层.row添加overflow-x: hidden避免干扰，同时固定左侧列宽度防止被挤压：

.row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden; /* 阻止外层容器滚动，让右侧列独立滚动 */
}

.scroller {
  overflow-x: auto; /* 无溢出时自动隐藏滚动条，体验更优 */
  white-space: nowrap;
}

.col-4 {
  flex-shrink: 0; /* 固定左侧列宽度，不被挤压 */
}

思路2：让内部内容撑开.scroller宽度 #

当前.scroller内的栅格布局被限制在父容器宽度内，没有真正超出。可以给内部内容容器设置固定宽度，确保内容溢出：

修改右侧列的HTML结构：

<div class="col scroller" style="min-width: 500px;">
  <!-- 添加固定宽度的容器，让内容溢出 -->
  <div style="width: 800px;">
    <div class="row pb-1">
      <!-- 表头内容 -->
    </div>
    <div class="row row-striped align-items-center pb-1 pt-1 player-table-text" style="height:48px;">
      <!-- 数据内容 -->
    </div>
  </div>
</div>

思路3：解除栅格的宽度限制 #

Bootstrap的.col类默认会继承父容器宽度，导致内容无法撑开。给.scroller内的.row设置width: fit-content，让内容自动适配宽度：

.scroller .row {
  width: fit-content;
}

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