My design includes two columns placed side by side, each containing different content. I assumed this was a default feature in Bootstrap 4 or at least in one of its alpha versions.
I have attempted the following:
.equal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.equal > [class*='col-'] {
display: flex;
flex-direction: column;
}
I added this code to my CSS file.
Here is how my HTML structure looks:
<div class="row equal">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
However, this code does not seem to have any impact.
Upon further inspection, it appears that the issue lies with the content inside the columns, as it does not occupy 100% of the parent's height.
When I set the height to 100%, it strangely becomes 100vh instead of matching the column's height.
In this CodePen example (link provided), I have nested divs inside the columns, but I require these divs to fill 100% of their parent column.
Here is an image (link provided) displaying the current layout of the row and columns, where the border represents the inner div of the column.
I aim to ensure that if there is more content in the left column, the right column automatically adjusts its height accordingly. Similarly, if the right column is taller, the left column should match its height.