I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present.
However, when I attempt to create the canvas using the w-100 and h-100 utilities (which are intended to set the width and height to 100%), it inexplicably generates a vertical scrollbar on the page. While browsing through various similar queries online, most solutions pertain to scenarios involving flex-direction: row and don't seem applicable to my situation where I'm dealing with a column setup. It's unclear whether this discrepancy is due to a bug in Bootstrap or if it stems from my misinterpretation of nesting flex containers and canvases.
To replicate the issue, you can refer to this Codepen: https://codepen.io/Rabadash8820/pen/eYWwXxx
Here is the structure of the HTML body:
<body class="d-flex flex-column vh-100">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Alert alert!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Warning"></button>
</div>
<header>
Header content
</header>
<div class="flex-grow-1 d-flex">
<div class="flex-grow-1 d-flex flex-column">
<main class="flex-grow-1 bg-dark">
<canvas class="d-block w-100 h-100"></canvas>
</main>
<footer>Footer content</footer>
</div>
<div class="w-25"><h2>Options</h2></div>
</div>
</body>