Для начала немного разметки:
<div class="same-height">
<div>some stuff</div>
<div>some more stuff</div>
</div>
Задача сдалать блоки внутри одинаковой высоты. Для этого применим чуть-чуть css:
.same-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
На этом магия закончена.
По утверждениям, данный метод работает во всех адекватных браузерах, отличились только девайсы с IOS на борту. Для них надо городить костыли:
_::-webkit-full-page-media, _:future, :root .same-height {
display:block;
flex-wrap:nowrap;
flex-direction:row;
align-items:inherit;
}
_::-webkit-full-page-media, _:future, :root .same-height>div {
min-height:220px;
}
Свойство min-height указать как максимальная высота блока.
Иеще один нюанс. Если в верстке используется bootstrap, товерстка может сильно поехать и прийдется переписать некоторые стили, вот пример, который работает:
.top-experts >.col-xs-6{
width: 49%;
}
@media (min-width: 768px) {
.top-experts > .col-sm-4 {
width: 33.2%;
}
}
@media (min-width: 992px){
.top-experts>.col-md-2 {
width: 16.6%;
}
}
Как можно понять из кода, с применением flex стали некорректно обрабатываться размеры блоков. По аналогии с приведенным кодом надо дописать стили для остальных классов col-*-*. Значения ширины я подбирал эмпирическим путем, но как правило хватает окркугления цифры дробной части м меньшую сторону.
