Do I not understand the flex-grow property?

Question

I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it, .big should be three times the size of the other .flex-item. As you can see, not so. Why?

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

Answer 1

You have to specify a value for flex-basis as well (not specifying this property causes behaviour similar to using the initial value, auto).

Add flex-basis: 0; to both children or just set it with the shorthand:

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

Answer 2

Flex-grow is commonly misunderstood in this way. Flex-grow only controls how the left over space is distributed between flex items, not how big they are in proportion to each other.

What you're looking for is really just this:

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

See also

• Flex-grow not working as expected (flex items don't have the widths I expect)
• In what circumstances is flex-shrink applied to flex elements and how does it work?

Answer 3

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

This is a working example

http://codepen.io/anon/pen/VjZYPV

Answer 4

Something related: Order matters. For example:

html:

 <div class="container">
    <div class="el el-1">One</div>
    <div class="el el-2">two</div>
    <div class="el el-3">three</div>
    <div class="el el-4">four</div>
    <div class="el el-5">five</div>
    <div class="el el-6">six</div>
    <div class="el el-7">seven</div>
    <div class="el el-8">eight</div>
 </div>

css:

 .container {
     display: flex;
 }

The following style works:

 .el {
    flex-grow: 1;
 }

 .el-4 {
    flex-grow: 3;
 }

But if you change the order, it will NOT work:

 .el-4 {
    flex-grow: 3;
 }

 .el {
    flex-grow: 1;
 }