title: multiline-flexbox in IE11 calculating widths incorrectly?
body: <p>Seems IE11 doesn't calculate flex item widths properly if <code>flex-wrap: wrap</code> is used.</p>
  
  <p>See <a href="http://jsfiddle.net/MartijnR/WRn9r/6/">http://jsfiddle.net/MartijnR/WRn9r/6/</a></p>
  
  <p>The 4 boxes each have flex-basis: 50% so we should get two lines of two boxes each, but in IE11 each box gets one line. When setting the border to 0, it works correctly. </p>
  
  <p>Any idea if this is a bug, or if there is way to make IE11 behave (and still use borders)?</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="box"&gt;1&lt;/div&gt;
      &lt;div class="box"&gt;2&lt;/div&gt;
      &lt;div class="box"&gt;3&lt;/div&gt;
      &lt;div class="box"&gt;4&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  
  
  <pre><code>section {
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
      -moz-flex-direction: row;
      -webkit-flex-direction: row;
      flex-direction: row;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
      box-sizing:border-box;
      margin:0;
  }
  .box {
      border: 1px solid black;
      background: #ccc;
      display: block;
      -ms-flex: 50%;
      -moz-flex: 50%;
      -webkit-flex: 50%;
      flex: 50%;
      box-sizing: border-box;
      margin:0;
  }
  </code></pre>
  
  <p>P.S. In my project only the last version of popular browsers needs to be supported, thankfully, but IE11 is one of them.</p>