Understanding flex-grow - html

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?

Answer 2

Flex = 0.5 means, you have flex-grow = 0.5, flex-shrink = 1 and flex-basis = 0
you are allocating the available space to flex items.
Let's just say, you have a container (Assuming div element) of width: 100vw with two flexible items(div elements) of each 40vw in it. So the total width consumed by your two div elements will be equals to 80vw and the left over available space would be 20vw. Now, You have set the flex = 0.5 for each of the two div elements. so, Each div element will grow up by 20vw/2 = 10vw in order to fully occupy the free space of the container.
Consider one more scenario with 3 div elements, div1 of width = 30vw, div2 of width = 10vw and div3 of width = 25vw.
Total width consumed by 3 div elements = 30 + 10 + 25 = 65vw.
Total available space = 100 - 65 = 35vw.
Now, Each div element is set to flex = 0.3, so each will grow up by 35/3 =~ 11.66vw