flex grow not working as described

Question

I'm a bit confused from my understanding flex grow determines the size of an child based on a portion in relation to its siblings, I an element set to flex-grow two but its clear far more then two. could some direct me to accurate information on flex grow or explain it, thanks.

https://jsfiddle.net/onnakjen/75/

  .parent{
      display: flex;
      border: 1px solid rgba(0,0,0,.5);
      height: 300px;
      width: 300px;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      //align-content: center;
    }
  .parent div{
      width: 50px;
      height: 50px;
      background-color: blue;
      margin:1px;
      color: white;
      text-align: center;
      line-height: 50px;
    }

  .d2{
      flex-grow: 3;
      }

What's your end goal exactly? You want `.d1` to be 50px and you want `.d2` to be twice whatever `.d1` is? Or you just want `.d2` to be twice `.d1` and you want them to both fill the width of the container? — Michael Coker, May 30 '17 at 14:17
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-10 - in your example, default value of flex-grow is 0 so setting your d2 to 3 and d1 to 0 means that d2 will take all remaining space as 0 / 3 = infinate — Pete, May 30 '17 at 14:42

score 3 · Accepted Answer · edited Oct 07 '19 at 16:20

You need to add flex-grow:1; to .d1 . Because flex-grow determines how the remaining space is divided between flex-items and how much each item receives.

So if you don't set flex-grow for some items, they won't get that space, and you won't get elements' widths as you expect.

.d1{
  flex-grow: 1;
}

.parent {
  display: flex;
  border: 1px solid rgba(0, 0, 0, .5);
  height: 300px;
  width: 300px;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;

}

.parent div {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 1px;
  color: white;
  text-align: center;
  line-height: 50px;
}

.d1 {
  flex-grow: 1;
}

.d2 {
  flex-grow: 3;
}

<div class="parent">
  <div class="d1">1</div>
  <div class="d2">2</div>

</div>

flex grow not working as described

1 Answers1