css - Make fixed width flexbox items wrap correctly -

i can't manage wrap flex items correctly if they're fixed width in google chrome. however, when using percentage-based widths, wraps correctly.

how can make work fixed width items?

see example: http://codepen.io/anon/pen/wajwlz

* {    box-sizing: border-box;    font-family: arial;  }  .wrapper {    width: 300px;    background: #eee;    border: solid #ddd 1px;    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -moz-box-wrap: wrap;    -webkit-box-wrap: wrap;    -webkit-flex-wrap: wrap;    -ms-flexbox-wrap: wrap;    -ms-flex-wrap: wrap;    flex-wrap: wrap;  }  .item {    background: #ddd;    border: solid 1px #aaa;    width: 100px;    /* doesn't wrap correctly */  }  .wrapper-second .item {    width: 33.333333%    /* wraps correctly */  }

<p>the wrapper 300px wide, each item <strong>100px</strong> wide</p>    <div class="wrapper">    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>  </div>    <p>you should see 3 items per row,    <br />chrome wraps after 2nd item (wraps soon).</p>    <p>when change item width <strong>33.333333%</strong>, wraps correctly.</p>    <div class="wrapper wrapper-second">    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>  </div>    <p><strong>question:</strong> how can make flexbox wrap fixed width items correctly?</p>

your issue have set elements box-sizing: border-box;. means width of .wrapper include border width.

to fix either:

• add box-sizing: content-box; .wrapper
• change width: 300px; width: 302px; on .wrapper

* {    box-sizing: border-box;    font-family: arial;  }  .wrapper {    box-sizing: content-box;    width: 300px;    background: #eee;    border: solid #ddd 1px;    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -moz-box-wrap: wrap;    -webkit-box-wrap: wrap;    -webkit-flex-wrap: wrap;    -ms-flexbox-wrap: wrap;    -ms-flex-wrap: wrap;    flex-wrap: wrap;  }  .item {    background: #ddd;    border: solid 1px #aaa;    width: 100px;    /* doesn't wrap correctly */  }  .wrapper-second .item {    width: 33.333333%    /* wraps correctly */  }

<p>the wrapper 300px wide, each item <strong>100px</strong> wide</p>    <div class="wrapper">    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>  </div>    <p>you should see 3 items per row,    <br />chrome wraps after 2nd item (wraps soon).</p>    <p>when change item width <strong>33.333333%</strong>, wraps correctly.</p>    <div class="wrapper wrapper-second">    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>    <div class="item">item</div>  </div>    <p><strong>question:</strong> how can make flexbox wrap fixed width items correctly?</p>