Flexbox - 使flex项目的孩子100%高度

Question

JSFiddle与我正在使用的相同的HTML/CSS包括:http: //jsfiddle.net/pf5bczLe/

.box在这种情况下,你如何使其父母的身高达到100%.box-wrap？

根据这篇文章,它的flexbox的项目不完美,它不会为其孩子的100%高度.有没有其他方法我可以实现所有项目具有相同的高度,虽然他们的高度是动态的？

谢谢你的时间

Answer 1

拉伸儿童元素非常接近.玩你的例子,添加以下css.box-wrap

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

然后添加以下内容 .box

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

JSFiddle链接