make one of bootstrap rows fill the rest of the height in view and scrollable - css

Question

Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.
<div class="container-fluid overflow-hidden h-100">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
</div>
.content-area {
max-height: 100%;
overflow-y: auto;
}
The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.
I tried flex-grow-1 from bootstrap instead of the css height but no luck.

Answer 1

Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.
<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area bg-info flex-grow-1">
<div class="col">
<h1>Content blah... </h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/7u2lXo0jyG
Related: Bootstrap 4 row fill remaining height

Answer 2

Add vh-100 class on the first row. It will make the viewport height, 100%.
<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
Source: https://getbootstrap.com/docs/4.4/utilities/sizing/