I've been working on a Bootstrap page that looks like this:
https://i.sstatic.net/kpHMM.png
On the right side, there are two tables inside a div. The issue I'm facing is that when the tables contain too many elements, they grow in height instead of showing a vertical scrollbar.
Here's what it looks like with the problem:
https://i.sstatic.net/rRi9M.png
The code for this section is as follows:
<div class="container-fluid">
<div class="row">
<!-- ********** Tauler ********** -->
<div id="board" class="col-sm-6 board m-3 shadow">
<!-- Board created via JS goes here -->
</div>
<!-- ********** Move List ********** -->
<div id="move-list" class="col-sm-2 m-3 bg-light shadow">
<table class="table table-striped caption-top">
<caption class="text-center fw-bold">List of Moves</caption>
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th id="light-player-name" scope="col">Player 1</th>
<th id="dark-player-name" scope="col">Player 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>♙f3</td>
<td>♟︎e5</td>
</tr>
<tr>
<th scope="row">2</th>
<td>♘cr</td>
<td>♞c6</td>
</tr>
<tr>
<th scope="row">3</th>
<td>♙f4</td>
<td>♟︎exf4</td>
</tr>
</tbody>
</table>
</div>
<!-- ********** Online Players List ********** -->
<div id="online-list" class="col-sm-2 m-3 bg-light shadow">
<table class="table table-striped caption-top">
<caption class="text-center fw-bold">List of Players Online</caption>
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>@username</td>
</tr>
<tr>
<th scope="row">2</th>
<td>@username</td>
</tr>
<tr>
<th scope="row">3</th>
<td>@username</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>