Seems IE11 doesn't calculate flex item widths properly if flex-wrap:
wrap
is used.
See http://jsfiddle.net/MartijnR/WRn9r/20/
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-width to 0, it works correctly.
Is this is a bug, and/or is there is way to make IE11 behave (and still use borders)?
<section>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</section>section { display: -moz-webkit-flex; display: -webkit-flex; display: flex; -ms-flex-direction: row; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -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%; min-width: 50%; flex: 50%; box-sizing: border-box; margin:0; }