Fix fixed width flexbox items
I am unable to crop flex items correctly if they are fixed in Google Chrome. However, when using percentage widths, everything wraps correctly.
How can I make this work with fixed width elements?
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 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>
+3
source to share
2 answers
Your problem is that you have set all items to box-sizing: border-box;
. This means that width
of .wrapper
will include the width of the border.
For correction:
- Add
box-sizing: content-box;
to.wrapper
- Change
width: 300px;
towidth: 302px;
to.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>
+2
source to share
There seems to be a problem with the operator border-box
.
If you remove it from the universal selector and apply it specifically for children, it seems to work.
.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>
+2
source to share