Is there a more graceful way to ensure that the div with id "second" fits inside its parent container and does not overflow when the h-100 class is applied in Bootstrap? Currently, I have used a hack by adding overflow:hidden to the parent container of the #second div, which works in my specific case. However, is this considered an elegant solution in this particular scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/540x400"></a>
</div>
</div>
</div>