Why is the green container expanding over the blue column when I apply height: 100% or h-100?
Is there a way to make it fit just the remaining height of the column?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" style="background-color: black">
<div class="row">
<div class="col-sm-6" style="background-color: red">
<p>Some</p>
<p>More</p>
<p>Content</p>
<p>Here</p>
</div>
<div class="col-sm-6" style="background-color: blue">
<h3>Content to retain</h2>
<section class="d-flex h-100" style="background-color: green">
<button class="btn btn-danger m-auto">Centered Button</button>
</section>
</div>
</div>
</div>