I've encountered an issue with Bootstrap 4 while utilizing the h-50 and h-100 helper classes along with rows incorporating columns of different breakpoints.
Consider the following scenario :
<style>
html,body {
height: 100%;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.purple{
background-color: purple;
}
</style>
xs
<section class="h-50 container-fluid">
<div class="row h-100 header_content_row purple">
<div class="col-4 h-100 red">
foo
</div>
<div class="col-4 h-100 green">
bar
</div>
<div class="col-4 h-100 blue">
whiz
</div>
</div>
</section>
sm
<section class="h-50 container-fluid">
<div class="row h-100 header_content_row purple">
<div class="col-sm-4 h-100 red">
foo
</div>
<div class="col-sm-4 h-100 green">
bar
</div>
<div class="col-sm-4 h-100 blue">
whiz
</div>
</div>
</section>
md
<section class="h-50 container-fluid">
<div class="row h-100 header_content_row purple">
<div class="col-md-4 h-100 red">whiz
</div>
<div class="col-md-4 h-100 green">bar
</div>
<div class="col-md-4 h-100 blue">foo
</div>
</div>
</section>
It's worth noting that on a full-screen computer display, the rows and columns appear correctly with full height. However, resizing the screen to a smaller size causes the second section to partially disappear behind the third.
Could this be a bug? How can this issue be resolved?
Edit: This demo by isherwood demonstrates the problem. Thanks