网格布局内的可滚动元素，没有固定高度

Question

几天来，我一直面临可滚动组件的 CSS 问题。

这是我必须开发的页面：

如您所见，我有一个顶部导航栏、一个面包屑组件、一个中央内容组件和一个页脚。 中央部分由 4 个不同的组件组成：处理天/月查询的顶部标题，左侧部分是可选组件列表，图表（在中心）和左侧的警报列表（对话框）。

左右部分必须是可滚动的。 问题是：我希望可滚动内容的最大高度是页面的高度 (100vh) 减去上方和下方组件（导航栏、页眉组件和页脚）的高度。 我将 Angular 与 SCSS 结合使用。

我有这样的 HTML 结构：

<div class="body-container">
  <ac-navbar></ac-navbar>
  <div class="main>
    <ac-sensor-container>
      <ac-sensor-header></ac-sensor-header>
      <ac-sensor-list></ac-sensor-list>
      <ac-sensor-chart></ac-sensor-chart>
      <ac-sensor-alerts></ac-sensor-alerts>
    </ac-sensor-container>
  </div>
  <footer></footer>
</div>

在 <div class="main"> 内我有 <router-outlet>，所以路由器内的所有东西都有一个上层容器。

body-container 上的 CSS：

display: flex;
flex-direction: column;
min-height: 100vh;

main 上的 CSS：flex-grow: 1

ac-sensor-container 上的 CSS：

display: grid;
grid-template-columns: 15% 70% 15%;

ac-sensor-list 上的 CSS：

overflow-y: auto;
max-height: calc(100vh - 15.75rem);

正如您所看到的，calc 没有正确使用，因为它没有响应，因此它不适用于每个屏幕。

是否有更好的方法将 ac-sensor-list 设置为可滚动以使其始终处于 100vh 的最大高度减去其他组件的高度？没有明确说明确切的高度？