Правильно обрезать элементы гибкой коробки фиксированной ширины

Question

Я не могу правильно обернуть элементы гибкости, если они фиксированы в Google Chrome. Однако при использовании процентной ширины все обертывается правильно.

Как это сделать с фиксированной шириной?

См пример: 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 is 300px wide, each item is <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 however wraps after the 2nd item (wraps too soon).</p> 
 

 
<p>when you change the item width to <strong>33.333333%</strong>, it however 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 I make flexbox wrap fixed width items correctly?</p>

Answer 1

Ваш вопрос в том, что вы установили все элементы в box-sizing: border-box;. Это означает, что width.wrapper будет включать ширину границы.

Чтобы исправить либо:

• Добавить box-sizing: content-box; в .wrapper
• Изменение width: 300px; в width: 302px; на .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 is 300px wide, each item is <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 however wraps after the 2nd item (wraps too soon).</p> 
 

 
<p>when you change the item width to <strong>33.333333%</strong>, it however 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 I make flexbox wrap fixed width items correctly?</p>

Answer 2

Это, как представляется, проблема с border-box заявления.

Если вы удалите его из универсального селектора и примените его специально к детям, это, похоже, сработает.

.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; 
 

 
    box-sizing: border-box; 
 

 
    width: 100px; 
 

 

 

 
}

<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>