Criteria:
The main row must have a height of 100%. If the rows overflow the column, the column should become scrollable. Rows should always be added at the end of the column.
Current Issue:
When the row height is set to 100% and overflows the column, scrolling does not work. However, if there is no overflow, rows are added correctly at the end. But when I remove the 100% height, scrolling works but rows are not added at the end.
With 100% Height:
https://i.sstatic.net/dWGYN.png
Without Height:
https://i.sstatic.net/fhOCN.png
My code snippet isn't working...
html, body {
height: 100%;
}<div class="container h-100">
<div class="row h-100 align-items-end" style="background-color: red;">
<div class="col-12" style="overflow-y: auto;">
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
<div class="row" style="height: 80px; background-color: blue; border: 4px solid black;"></div>
</div>
</div>
</div>