Struggling to get the map in this column to fill the entire height within a Bootstrap4 column.
After attempting to add h-100 to the row, scroll bars appeared at the bottom of the map and the bottom 10% of the page went missing.
https://i.sstatic.net/epfxW.jpg
The code snippet for the layout is:
<div class="row h-100">
<div id="leftPanel" class="col-sm-2">
<table id="tasklist" class="table table-sm">
<thead>
<tr>
<th>Time</th>
<th>District</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td>12/12/19 08:00</td>
<td>ACD</td>
<td><a href="#">3F schools</a></td>
</a>
</tr>
<tr>
<td>13/12/19 19:30</td>
<td>WMD</td>
<td><a href="#">3T Burbank St</a></td>
</tr>
</tbody>
</table>
</div>
<div id="viewDiv" class="col-sm-10">
</div>
</div>
In the provided fiddle, the row height adjusts based on the number of rows in the left column div.
Seeking guidance on how to make the map occupy the entire right column without triggering scroll bars.