title: Flexbox used for equal height, however it is ignoring column width in grid system
body: <p>I have a grid which in this examples has 4 coloumns (width:25%). This is fine however I need the columns to be equal height. The content will be loaded in dynamically so I can't set a fixed height.</p>
  
  <p>I have implemented flexbox and while this solves the height problem, it seems to ignore the percentage widths. </p>
  
  <p>Below is my code and here is a link to the codepen... <a href="http://codepen.io/anon/pen/CEHgo" rel="nofollow">http://codepen.io/anon/pen/CEHgo</a></p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col3"&gt;
      &lt;div class="box"&gt;Lorem ipsum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col3"&gt;
      &lt;div class="box"&gt;Lorem ipsum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col3"&gt;
      &lt;div class="box"&gt;Lorem ipsum&lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {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;
  }
  </code></pre>
  
  <p>How can I get equal height coloumns whilst still respecting the column widths?</p>
  
  <p>Thanks in advance</p>