Understanding flex-grow

Question

I have 3 divs and if I give flex: 0.5 to first two divs, the last div should move to the next line if I have given flex-wrap: wrap. Please correct if I am wrong.

Following is my html / css:

.parent {
  display: flex;
  height: 100px;
  background-color: red;
  flex-wrap: wrap;
}
.child-1 {
  background-color: green;
  flex: 0.5;
}
.child-2 {
  background-color: yellow;
  flex: 0.5;
}
.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>

Please check JSFiddle for this.

Thanks in advance.

Answer 1

The flex-grow property is designed to distribute free space in the container among flex items.

It is not intended for directly or precisely sizing flex items.

From the spec:

flex-grow ... determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

Hence, flex-grow will not force items to wrap. Here's your example with flex-grow: 1000: demo

To define a length of a flex item use width, height or flex-basis.

---

Explaining flex-grow: 0.5

When you apply flex:0.5, you're using the flex shorthand property to say this:

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

The flex-grow component represents a proportion. In this case, it's telling flex items to consume half of the available space in the container relative to the flex-grow factor of its siblings.

So, for instance, if the container were width: 600px and the total width of the three divs was 450px, this would leave 150px in free space (demo).

If each item had flex-grow: 1, then each item would consume 50px of the extra space, and each item would compute to width: 200px (demo).

But in your code, two items have flex-grow: 0.5, and the last item has flex-grow: 0, so here's how it breaks down:

• div#1 will get 75px (half of the available space)
• div#2 will get 75px (half of the available space)
• div#3 will get 0 (because its flex-grow is 0)

These are the computed values now:

• div#1 = width: 225px
• div#2 = width: 225px
• div#3 = width: 150px

demo

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  background-color: red;
  width: 600px;
}

.parent > div {
  flex-basis: 150px;
}

.child-1 {
  flex: 0.5;
  background-color: green;
}

.child-2 {
  flex: 0.5;
  background-color: yellow;
}

.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3"> LOREN IPSUMLOREN IPSUM</div>
</div>

NOTE: The truth of the matter is, because divs #1 and #2 have the same flex-grow factor, and div #3 has a factor of 0, the value is irrelevant. You could use any number to replace 0.5. As long as it's the same in both divs, the items will compute to 225px, because the proportions will be the same.

More information:

• flex-grow not sizing flex items as expected
• How to get flexbox to include padding in calculations?
• What are the differences between flex-basis and width?