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; } ``` ```

Why isn't this exactly three times the size of the other one?
Not really working like expected I don't think...

```

Accepted Answer

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

Do I not understand the flex-grow property?

Solution

Problem

Related problems