Flexbox高度100% (铬)

Question

我在chrome中遇到了一个问题，这在Firefox中是不会发生的。

 <div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
        <div class="flex-3-child"></div>
    </div>
</div>



.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
    width: 100px;
    background-color: blue;
}
.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
}
.flex-2-child {
    height: 100%;
    width: 100%;
    background-color: green;
}
.flex-3-child {
    height: 100%;
    width: 100%;
    background-color: steelblue;
}

http://jsfiddle.net/michaelch/TfB9c/2/

如果你在firefox和chrome中检查这个小提琴，你会发现有很大的不同。flex-2子代和flex-3子代在chrome中没有高度，但我认为它们的行为都是正确的，相对于它们的父代都有100%的高度。

你知道如何在chrome中拥有正确的行为吗？

提前谢谢。

迈克尔

Answer 1

如果您将height: 100%;添加到您的.flex-2类中，您将在Chrome中获得与在Firefox中相同的结果。

.flex-2 {
    position: relative;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: red;
    height: 100%;                // Add this!
}

如果孩子的身高是由父母身高的百分比定义的，那么父母的身高也应该被定义。