flex-grow

Do I not understand the flex-grow property?

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

flex-grow not working in column layout

Everything in your code is working fine. The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content. The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do. Try this adjustment … Read more