我即将实现此外观和行为，但右列的滚动出现问题。滚动条出现，但不滚动右列的内容。应如下所示：

.
当前外观如下所示：

可能有多种方法或变化，我可以采取或作出，但任何建议是受欢迎的！代码如下。

.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;
}

<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>