Do I Not Understand the Flex-Grow Property

.container {  display: flex;}
.container .featured {  background: pink;  flex: 1;}
.container .loaded {  background: lightblue;  flex: 3;}

<div class="container">  <div class="featured">    <h2>Featured Article</h2>    <p>Lorem Ipsum ihsjrtop fdiubhreg urfhga ergujdfhjbsd fmbn szlriuv vfduvbhl;er vkl.ifhb;oabe rvkdbfvjsh fvnz dfbvzlh g;oiuhv za,rujhvblzubjavznbmsdf v vjlzUBvmzBSv blizU vzUIJBVl;djhb mzcn dvz,bdfrvmzn dcv,zubdfvmn zfv,uzjbdfkbvjnv.zbin.d,vjbnkd bvnzfbzdj      v,jzdfuvblkjdfg ,fdjknb;oizdf b.kfzdnbizd fvbkjzfdb vf</p>  </div>  <div class="loaded">    <h1>Home Page</h1>  </div></div>

Understanding the difference between the flex and flex-grow properties

flex is a shorthand property of flex-grow, flex-shrink and flex-basis.

In this case, flex: 1 sets

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0 (in old spec drafts it was flex-basis: 0%)

If you only use flex-grow: 1, you will have

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

Then, the difference is that the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.

In the second case each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.

Understanding flex-grow

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>

.wrapper {  display: flex;  width:600px;}
.box1 {  background: red;  width: 100px;  flex-grow: 1;}
.box2 {  background: green;  flex-grow: 1;}

<div class="wrapper">  <div class="box1">One</div>  <div class="box2">Two</div></div>

body {  display: grid;  grid-template-rows: auto 1fr auto;  margin: 0;  height: 100vh;}
header {  padding: 15px;  font-size: 1rem;  background: red;}
main {  background: green;  overflow:auto;  padding:10px;}
footer {  padding: 15px;  font-size: 1rem;  background: blue;}

<header>this is a header</header><main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.
Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa</main><footer>this is a footer</footer>