The flex (flex-grow, flex-shrink, flex-basis) properties are for flex items, not flex containers.
http://codepen.io/cimmanon/pen/mHbLi
.flexbox {
display: flex;
flex-flow: column wrap;
height: 100%; /* here */
> div {
flex-grow: 1; /* here */
padding: 1rem;
&:nth-child(1) { background: #FF0000;}
&:nth-child(2) { background: #00FF15;}
&:nth-child(3) { background: #0015FF;}
}
}
html, body {
height: 100%;
font-size: 62.5%;
}