Css 防止在添加记录时容器的高度增加

我试图在页面中显示记录列表。我目前面临的问题是，当我向列表中添加新记录时，页面大小会增加，并且会添加一个滚动条。但是我不希望页面在滚动条中显示结果，而是希望滚动条位于网格表中，并将整个容器的高度固定为div的高度

我不想固定div的高度，因为它几乎没有依赖项。我想让记录表在添加内容时不会扩展。我可以通过计算页面上的vh和其他容器并将表格容器的高度设置为100%来固定高度。但我想让它成为一种我们只能更新css而无需计算的方式。比如移除允许其增长的flex等

这张桌子有三个分区。表格的页眉、表格内容和页脚。我希望滚动条位于页眉和页脚内部，而不是在网页上，当我们添加记录时，滚动条会增加页面的高度

我试着用overflow-y在桌面div上滚动，但没有成功。 尝试高度100%，弹性增长-0

---

有人能指出一个简单的css修复程序可能最终解决这个问题吗？

您可能想使用css网格。例如：

<style>
      .layout {
        height: 100vh;
        display: grid;
        grid-template-rows: 50px 1fr 50px;
      }
      .header {
        background: #ccc;
      }
      .content {
        overflow: auto;
      }
      .footer {
        background: #ddd;
      }
    </style>

.布局{
高度：100vh；
显示：网格；
网格模板行：50px 1fr 50px；
}
.标题{
背景：#ccc；
}
.内容{
溢出：自动；
}
.页脚{
背景：ddd；
}

HTML

标题
内容
页脚

请在问题中添加代码片段。

<div class="layout">
      <div class="header">Header</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
</div>