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

Question

我在下面的小提琴中有一个弹性布局：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

您只需进行一些修改，并在父display: flex上指定.tile，在flex: 1 <{1}}指定.inner-tile

JSFiddle Link