title: Equal width flexbox columns in IE
body: <p>I'm building a simple flexbox column layout and have to support IE10. I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.</p>
  
  <p>I can solve this issue by setting a <code>max-width: 50%</code>, but this means we need percentages based on the number of columns we want. It works for two columns, but for three we'd need <code>33.333%</code> etc.</p>
  
  <p>Is there any other way to make IE10/11 to keep flex widths equal?</p>
  
  <pre><code>&lt;div class="columns"&gt;
    &lt;div class="column"&gt;
      &lt;p&gt;hey there this is some long text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  .columns {
    display: -ms-flexbox;
    -ms-flex-flow: row;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    width: 100%;
  }
  
  .column {
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    min-height: 200px;
    border: 1px solid red;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/gimifixexo/1/edit?html,css,output" rel="nofollow">http://jsbin.com/gimifixexo/1/edit?html,css,output</a></p>