Ethan C Ethan C - 6 months ago 27
CSS Question

Do I not understand the flex-grow property?

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

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