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.