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

我试图实现一个简单的视图。 此视图由顶视图和底视图组成

顶部是静态的，无趣的

底部将包含将溢出该组件边界的内容。在这种情况下，我希望它显示一个滚动溢出

问题是，我所处的情况是，它们的布局是在CSS网格中构建的。不要问为什么，这不是改变。此外，使用视口单位也不在表中

如果阅读下面的代码，布局大致可以转换为：

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

当最下面一行的内容很小时，它会工作，但当最下面一行的内容溢出时，它会中断。具体地说，它扩展了.bottomRow的大小，并且组件离开屏幕而不会溢出

这里发生的事情是，你看到的蓝色div的高度与孩子们满溢的身躯相匹配。我希望它保持其大小，而不是溢出

这是到目前为止我的代码（这并不是屏幕录制的代码，只是基本的代码）

.layout{
宽度：100%；
身高：100%；
显示：网格；
网格模板：最大内容自动/1fr
}
托普罗先生{
高度：50px；
宽度：100%
}
.底层{
宽度：100%；
身高：100%；
/*最大高度：？；如果设置为静态值，则有效*/
框大小：边框框；
边框：5px纯黑；
溢出y：自动；
}

//足够的内容溢出

我能够成功实现这一点的唯一方法是设置最大高度

但要使其动态化，我必须添加一个事件侦听器来调整组件大小。不理想

我也尝试过使用

max-height:-webkit-fill-available

，虽然这在Chrome上有效，但在其他主流浏览器上却不起作用

---

请帮忙！总的来说，我正试图找到一种解决方案，避免使用第三方库、JavaScript、事件侦听器，并且能够跨浏览器兼容。

即使没有高度和宽度，它也可以正常工作。您好，adrayv，您必须在

.layout

上使用

height:100vh

，或者添加

html，body{height:100%}

（），就像上面共享的代码笔一样，这样您就可以开始了！还可以看到它工作良好，即使没有高度和宽度。您好，adrayv，您必须在

.layout

上使用

height:100vh

，或者添加

html，body{height:100%}

（），就像上面共享的代码笔一样，这样您就可以开始了！也看到