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-child和flex-3-child在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!
}

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

Flexbox高度100％镀铬

1 个答案: