Flexbox - make a flexible baby item 100% high

Question

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

How do you make .box100% of the height of your parent, in this case .box-wrap?

Accordingly , post your defect to the flexbox element, it does not act as 100% growth for your children. Is there any other way that I could reach all elements with the same height, although their height is dynamic?

thank you for your time

Answer 1

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

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

.box

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

JSFiddle