flex col inside里面的flex row里面比它的容器高

Question

我想我刚刚遇到 chrome 中的错误。通过在弹性行（或相反的方向）中嵌入弹性列，我最终会得到错误的盒子高度，使它们脱离父级。

我试图在这里重现它（失败）＆＃34; 工作＆＃34; http://jsfiddle.net/b8QvP/1/

HTML：

<div class="root">
    <div class="col">
        <div class="row">
            <div class="col">
                We Are
            </div>
            <div class="row">
                Too Tall
            </div>
        </div>
        <div class="col">            
            ( only when I'm here )
        </div>
    </div>
</div>

css：

.row, .col {
    height: 80%;
    width: 80%;
    margin: 1em;
    display: flex;
    font-weight: bold;
    color: #fff;
    font-family: cursive;
    text-align: center;
    justify-content: space-around;
}
.root { height: 400px; width: 600px; }
.row { flex-direction: row; }
.col { flex-direction: column; }

div > div  { background-color: #CCC; }
div > div > div { background-color: #AAA; }
div > div > div > div { background-color: #888; }

结果：

然而，我对firefox没有任何问题。

我错过了什么吗？如果没有，是否有任何解决方法（除了避免弹性）？然后我如何以及在哪里检查它是否已被报告/已知？