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

Question

我在下面有一个 flex 布局 fiddle: 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 上指定 display: flex 并在子 .inner-tile

上指定 flex: 1

JSFiddle Link