Here's a puzzling question.. I've got a container with multiple rows, and I want these rows to completely fill the container's height without overflowing. I'm trying to avoid manually setting the row heights.
When I add class="h-100" to the rows, only the first one takes up the full height while the rest spill out of the container. I expected the parent's height to constrain the inner elements...
This seems like it should be straightforward, but I can't seem to figure out the right combination of classes and styles.
<html lang="en" style="
height: 100%;
"><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body style="height: 100%;">
<div class="container-fluid h-100">
<div class="row">row 1</div>
<div class="row">row 2</div>
</div>
</body>
</html>