如何允许高度设置为“自动”的CSS网格行上的溢出

Question

我正在尝试实现一个简单的视图。 该视图包括顶视图和底视图。

顶部是静止且无趣的。

底部将包含将超出该组件边界的内容。如果发生这种情况，我希望它显示滚动溢出。

This is roughly how I want it to look (gif screen recording)

问题是我处于CSS网格中构建其布局的情况。不要问为什么，这是没有变化的。还使用视口单位不在桌子上。

如果您阅读下面的代码，则布局大致翻译为：

“ 创建两行。第一行将具有定义的高度。第二行将填充剩余的可用空间”

当底部行的内容较小时，此方法有效，但底部行的内容溢出时，它会中断。具体来说，它会扩展.bottomRow的大小，并且该组件不会出现屏幕溢出而不会溢出。

Here is a screen recording that illustrates this behavior

这里发生的是，您看到的蓝色div的高度与其子级的溢出尺寸相匹配。我希望它保留其大小，然后溢出。

到目前为止，这是我的代码（这与屏幕录像中的代码不完全相同。只是要点）

.layout {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: max-content auto / 1fr
}

.topRow {
    height: 50px;
    width: 100%
}

.bottomRow {
    width: 100%;
    height: 100%;
    /* max-height: ???; works if set to a static value */
    box-sizing: border-box;
    border: 5px solid black;
    overflow-y: auto;
}

<div class='layout'>
   <div class='topRow'/>
   <div class='bottomRow'>
   // ENOUGH CONTENT TO OVERFLOW
   </div>
</div>

我成功实现此目标的唯一方法是设置max-height。

See screen recording

但是要使其动态化，我将不得不添加一个事件侦听器以调整组件的大小。不理想！

我也尝试过使用max-height: -webkit-fill-available，虽然它可以在Chrome上使用，但不适用于其他主要浏览器。

请帮助！总体而言，我正在尝试找到一种避免使用第三方库，JavaScript，事件监听器并且与跨浏览器兼容的解决方案。