使用flexbox的嵌套滚动容器

Question

我正在尝试使用flexbox创建以下布局。左右面板应可滚动。

我有一个可以完美地跨浏览器运行的实现。但是，它已停止使用最新版本的Chrome和Firefox。不过，它仍然可以在Safari上运行。

在Chrome和Firefox上，页眉消失，整个页面滚动，而不仅仅是两个面板。我很想知道发生了什么变化，建议的修复方法是什么？我没有正确遵循flexbox规范吗？

CSS如下所示。完整的源代码可以在Codepen上找到。

html, body {
    height: 100%;
}

/* ----- root and its children ----- */
#root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: #1277eb;
    height: 60px;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: row;
}

/* ----- children of content ----- */
.lhs {
    background-color: #e7f1fd;
    min-width: 400px;
    overflow: auto;
}

.rhs {
    flex: 1;
    overflow: auto;
}