在 Chrome 中显示 flex，子元素的高度为 100%

Question

我在以下小提琴中有一个 flex 布局：http://jsfiddle.net/TfB9c/14/

HTML：

<div class="flex-frame">
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
    <div class="tile">
        <div class="inner-tile ">TEST TEST TEST TEST TEST TEST TEST</div>
    </div>
</div>

CSS：

.flex-frame {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.tile {
    width: 25%;
    background-color: #15b575;
    margin: -1px;
    border: 1px inset white;
}
.inner-tile {
    height: 100%;
    background-color: yellow;
}

在 Firefox 中，我得到了预期的结果，在一行中，每个图块高度相等：

在 Chrome 中并非如此。什么错误，我想不通？

Answer 1

您只需要进行一些修改并在父.tile 和flex: 1 上指定display: flex 到子.inner-tile

JSFiddle Link