Flex item wrapping when it should not

December 17, 2022

I have a six items in a container that is 600px wide and each item is 100px wide. I’m using box-sizing: border-box;. The last item wraps onto a next line. When I remove the border from the container the items no longer wrap. But from my understanding when using “box-sizing: border-box;“` the items should not wrap. Any ideas what is causing the items to wrap?

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(244, 244, 244);
}

.container {
    background-color: antiquewhite;
    height: 100vh;
}

.flex-container {
    margin: auto;
    display: flex;
    border: 1px solid black;
    background-color: aqua;
    width: 600px;
    flex-flow: row wrap;
}

.flex-item {
    border: 1px solid black;
    width: 100px;
}

<div class="container">
   <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</div>

>Solution :

Your issue seems to be that the container is also shrinked (so the actual space for six 100px wide items is less than 600px) – precisely because it also has box-sizing: border-box applied to it.

border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

From https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Set the container’s box-sizing back to content-box and its items will fit.

* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(244, 244, 244);
}

.container {
    background-color: antiquewhite;
    height: 100vh;
}

.flex-container {
    margin: auto;
    display: flex;
    border: 1px solid black;
    background-color: aqua;
    width: 600px;
    flex-flow: row wrap;
    box-sizing: content-box;
}

.flex-item {
    border: 1px solid black;
    width: 100px;
}

<div class="container">
   <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</div>