32

I've set up a series of three containers and applied display: flex; and flex-wrap: wrap; to them but they aren't wrapping when I reduce the window size?

I've put the code below and seem to be getting nowhere in terms of getting to the root of the problem.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1;
  background-color: red;
}

.item2 {
  flex: 1;
  background-color: blue;
}

.item3 {
  flex: 1;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1</p>
  </div>

</div>

2
  • 1
    why would it wrap - you have not specified a width for your child items and the size of the content means they can all fit on one line, but as you have set flex to 1, it is telling the items to fit on the row as you are setting the flex-basis for each to be the same
    – Pete
    Commented May 23, 2017 at 12:56
  • 2
    Also as your container is a fixed width, the screen size will have no bearing on as to whether it wraps or not
    – Pete
    Commented May 23, 2017 at 13:03

2 Answers 2

37

You need to use max-width instead of width on the container, you have to allow the container to shrink for the items to wrap.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  max-width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1;
  background-color: red;
}

.item2 {
  flex: 1;
  background-color: blue;
}

.item3 {
  flex: 1;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1</p>
  </div>

</div>

2
  • I resized my window and everything stayed on the same line... Commented Jun 15, 2021 at 21:32
  • @Uriahs Victor You have to resize it enough so that there is not enough space for the three texts to occupy the same line, so about. Commented Jul 7, 2022 at 22:25
28

Here's why the items aren't wrapping:

You have a flex container set to width: 800px.

The container has three flex items set to flex: 1, which is shorthand for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

This means that the actual width of each item is 0 (flex-basis: 0), and each item is sized based on the available space on the line (flex-grow: 1).

So, in effect, you've sized each item to be one-third of the space on the line, whatever that may be. Therefore, each item can shrink to width: 0, and they will never wrap.

If you add content and/or width and/or flex-basis to one or more items, and the items grow to exceed 800px (the width of the container), then your flex items will wrap.

But note, they won't wrap based on your re-sizing of the browser window, because the container doesn't occupy width: 100% of the viewport. They will only wrap based on the width of the container.

body {
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1 0 250px;
  background-color: red;
}

.item2 {
  flex: 1 0 250px;
  background-color: blue;
}

.item3 {
  flex: 1 0 400px;
  background-color: green;
}
<div class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
    <p>flex: 1 0 250px</p>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>
    <p>flex: 1 0 250px</p>
  </div>

  <div class="item item3">
    <h1>ITEM3</h1>
    <p>flex: 1 0 400px</p>
  </div>

</div>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.