Flexbox - make flex item child 100% height

Question

JSFiddle with identical HTML/CSS I'm working with included: http://jsfiddle.net/pf5bczLe/

How do you make .box 100% height of its parent, in this case .box-wrap ?

According to this post its flexbox's item imperfection it doesn't act as 100% height for its children. Is there any other way I could achieve all the items to have the same height although their height is dynamic?

Thanks for your time

Answer 1

Very close in stretching the child elements. Playing with your example, add the following css to .box-wrap

.box-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

Then add the following to .box

.box {
    -webkit-flex: 1;
    flex: 1;
 }

JSFiddle Link