强制引导行占用剩余的页面高度，而不是扩展超过屏幕高度

Question

我有一个 Angular 应用程序，它利用引导程序创建以下内容（简化结构）。

<div class="container">
    <div class="header>
        <div class="mat-card> 
             <!-- Header stuff -->
        </div>
    </div>
    <div class="row">
        <div class="col-8">
            <div class="mat-card> 
                <!-- Table goes here -->
            </div>
        </div>
        <div class="col-4>
            <div class="mat-card> 
                <!-- Other stuff --> 
            </div>
        </div>
    </div>
</div>

结构中存在的col-8 列将包含mat-card，其中将包含一个具有可变行数的表。这意味着如果表格包含大量行，表格可能对于页面来说太大并且可能溢出屏幕，迫使用户滚动查看整个表格。

我希望能够强制col-8 列仅使用显示表格所需的空间，而不是更多，但是我希望该列随列一起扩展。所以 5 行的表将导致 col-8 使用比 10 行的表更少的空间。

但是，我还希望能够在 col-8 上强制设置最大高度，以便该列只会变得与页面上剩余的垂直空间一样高，因此 col-8 的最大高度应该是browser window - the height of the header

所以，总结一下。

1. col-8 包含不同高度的表格
2. col-8 高度应该扩大以适应桌子的高度
3. col-8 高度不应超过浏览器窗口的高度

我可以通过将列设置为height: vh 和overflow-y: scroll 来做我想做的事，但这意味着列将是固定高度并且不会响应，所以虽然它很接近但不是完整的解决方案。

Answer 1

但是使用 max-height 而不是 height，它将是 imo 响应式的。对吧？