I'm so close to getting the desired look and behavior, but I'm facing a problem with the scrolling in the right column. The scrollbar is visible but it's not scrolling the content on the right side. It should look like this:
.
Currently, it looks like this:
There are probably various approaches or changes I could try, so any suggestions are welcome! The code is provided below.
.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c39223e223f">[email protected]</a>/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>