Создание равных высотных divs в Bootstrap 4 flexbox

Question

Я использую Flexbox с 4-мя флешками. Я не могу сделать row> col> div box равными высотами.

Я пробовал position: absolute, но это не самое лучшее.

Вот скриншот:

<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 высота всегда равна, но .home_category высота варьируется в зависимости от размера содержимого.

Я ищу решение для 100% высоты для .home_category. Такая же высота, как col-xs-12.

Живая демонстрация на https://officestock.ca/

Я ценю ваши отзывы.

Answer 1

При просмотре кода коробки в настоящее время получают высоту от содержимого. Вы заметите, что некоторые метки изображений являются двухстрочными, а другие - трехстрочными. Различия в этих номерах строк вызывают разную высоту для ящиков.

Чтобы применить полную, равную высоту для всех коробок просто сделать эту настройку в вашем CSS:

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