在列中弹出儿童，伸展其他儿童

Question

我已经包含了一个Codepen来展示我的位置以及我想要实现的目标。

http://codepen.io/pier-philip/pen/ORoopA

这是我的HTML：

<div class="container">
    <div class="row l-flex">
        <!-- START COL 6 -->
        <div class="col-md-6">
            <div class="greybox">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Title of the box</h2>
                    </div>
                </div>
                  <div class="row l-flex">
                      <div class="col-md-12">
                        <div class="row l-flex-children">
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Revelant data</h3>
                                        <p>Today</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Data</h3>
                                        <p>Filler text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COL 6 -->
        <!-- START COL 6 -->
        <div class="col-md-6">
            <div class="greybox">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Title of the box</h2>
                    </div>
                </div>
                  <div class="row l-flex">
                      <div class="col-md-12">
                        <div class="row l-flex-children">
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Revelant data</h3>
                                        <p>Today</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Data</h3>
                                        <p>Filler text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COL 6 -->
    </div>
</div>

这是我的SCSS：

.l-flex {
    display: flex;
    > [class*='col-'] {
        flex: 1;
    }
}

.l-flex-children {
    display: flex;
    > [class*='col-'] {
        display: flex;
        > * {
            flex: 1;
        }
    }
}

我需要让孩子伸展到容器的高度。如果一个statbox因为他的内容而拉伸，我希望他们所有人都有相同的高度。

编辑：我可以提供更多信息吗？我一直试图解决这个问题很长一段时间，但我还没有找到令人信服的答案。