Flexbox используется для равной высоты, однако он игнорирует ширину столбца в сетке

Question

У меня есть сетка, которая в этих примерах имеет 4 колонны (ширина:25%). Это хорошо, однако мне нужно, чтобы столбцы были одинаковой высоты. Контент будет загружаться динамически, поэтому я не могу установить фиксированную высоту.

Я реализовал flexbox, и хотя это решает проблему с высотой, он, похоже, игнорирует ширину в процентах.

Ниже приведен мой код, а здесь - ссылка на кодовый блок... http://codepen.io/anon/pen/CEHgo

HTML

<div class="row">
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div> 
</div>

CSS

* {box-sizing:border-box}

.row {
margin-left: -1%;
margin-right: -1%;
margin-bottom: 1em;
display:flex;
}
.row:before,.row:after {
content: " ";
display: table;
}

.row:after {
clear: both;
}

.col3 {
position: relative;
float: left;
padding-left: 1%;
padding-right: 1%;
width:25%;
display:flex;
}

.box {
background:#ccc;
padding:15px;
margin-bottom:15px;
}

Как я могу получить столбцы одинаковой высоты, при этом сохраняя ширину столбцов?

заранее спасибо

Answer 1

Добавлять flex-wrap: wrap; в .row и добавить width: 0; к .row:before, .row:after исправить положение 4-го столбца в Google Chrome.

JSFiddle - ДЕМО

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}
.row:before, .row:after {
    content:" ";
    display: table;
    width: 0; /* Fix for Google Chrome */
}

Answer 2

Ваш код может быть значительно очищен. Использование flexbox полностью исключает необходимость использования поплавков и исправлений. Проверьте код ниже:

* {box-sizing:border-box}

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}

.col3 {
    padding-left: 1%;
    padding-right: 1%;
    width:25%;
    display: flex;
}

.box {
  background:#ccc;
  padding:15px;
  margin-bottom:15px;
}

Демо: http://codepen.io/anon/pen/yswnG