I am trying to create a layout that would be responsive using Bootstrap 4. The problem I am having is when two divs wrap vertically for a smaller device the top div seems to push the lower div down exceeding the parent container (please see the images below). I want the lower div to fit with in the container, how can I achieve this using Bootstrap 4 or minimal css?
I added a yellow border on the bottom of the second div so we can see the push.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.bottom-border {
border-bottom: 50px solid yellow;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><body><div class="container-fluid p-0 h-100"><div class="row h-100"><div class="col-md-8 bg-primary h-md-100 "><div class="d-md-none text-center bg-primary"><h5>Left Section</h5></div><div class="d-none d-md-block m-3"><h1>Left Section</h1></div></div><div class="col-md-4 h-100 text-center bg-danger bottom-border"><h4>Right Section</h4></div></div></div></body>