Css flex col inside flex row inside'；它比它的容器高

我想我刚刚在chrome中遇到了一个bug。通过在flex行（或相反）中嵌入flex列，我最终得到了错误的框高度，这使它们超出了其父级

我试着在这里重现它（失败）“奏效”

html:

结果:

但是，我对firefox没有问题

---

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

display:flex

作为

display:flex

的直接子级？不确定是否有好的方法。为什么？这难道不应该像在

display:block

内部使用

display:block

或其他任何东西一样吗？我的想法是Flexbox容器不能是Flexbox项目（反之亦然），但它是。

<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>

.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; }