So I have a Bootstrap header, one of the ones from their examples. Below that, I have a grid container with 3 columns in it. I want that grid to fill the height of the page that remains after the header, and not to extend past the height of the page. The contents of the columns should then adapt to the height of those columns in the grid. How can I do this? I have tried the flex-grow class but that doesn't do anything here. Here's my code.
#container { display: flex; flex-direction: row;}header { margin-bottom: 0px !important;}<div id="container"><header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"><div class="col-md-3 mb-2 mb-md-0"><a href="/" class="d-inline-flex link-body-emphasis text-decoration-none"><h1>My Project</h1></a></div><ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"><li><a href="#" class="nav-link px-2 link-secondary">New Game</a></li></ul><div class="col-md-3 text-end"><button type="button" class="btn btn-outline-primary me-2">Login</button><button type="button" class="btn btn-primary">Sign-up</button></div></header><div class="container-fluid"><div class="row flex-grow-1"><div id="players" class="col-md-2 border-end"></div><div id="game-map" class="col-md-7"><script>$(function(){ $('#game-map').load("src/img/game-map.svg"); });</script></div><div id="hand" class="col-md-3 border-start"></div></div></div></div>