Why isn't the flex-grow property changing anything?

Question

Container div is display flex, but the two child divs do not respond to the flex grow property.This approach seemed to work fine for li's in a ul, what am I doing wrong?

.container {
  display: flex;
}

.container .featured {
  background: pink;
  flex-grow: 1;
}

.container .loaded {
  background: lightblue;
  flex-grow: 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>

Answer 1

This will work if you use flex: instead of flex-grow:

For more details, you better read this link

Note: flex is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional.

In here I have used:

flex: 1; = flex-grow: 1;flex-shrink: 1;flex-basis: 0%;

flex: 3; = flex-grow: 3;flex-shrink: 1;flex-basis: 0%;

.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>

Hope this was helpfull for you.