Creating equal height divs in Bootstrap 4 flexbox

Question

I use Bootstrap 4 flexbox enabled. I can not make row > col > div box equal heights.

I have tried position: absolute but it is not the best.

Here's a screenshot:

<div class="row" >
<div class="col-xs-12" >
<div class="home_category" ></div> 
</div>
<div class="col-xs-12" >
<div class="home_category" ></div>
</div>
</div>

col-xs-12 's height always equals but .home_category height varies based on content size.

I'm looking for a solution to have 100% height for .home_category . Same height as col-xs-12 .

Live demo at https://officestock.ca/

I appreciate your feedbacks.

Answer 1

In reviewing your code, the boxes are currently getting their height from the content. You'll notice that some image labels are two-line and others are three-line. The differences in those line numbers are causing differing heights for the boxes.

To apply full, equal height to all boxes simply make this adjustment to your CSS:

@media (min-width: 48em) {
.col-md-6 {
    flex: 0 0 50%;
    display: flex; /* NEW */
}