强制引导行占用剩余页高，而不展开超过屏幕高度。

Question

我有一个角度应用程序，它使用引导来创建下面的内容(简化结构)。

<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卡，其中将包含一个具有可变行数的表。这意味着，如果表包含大量行，该表可能对页面太大，可能会从屏幕上溢出，迫使用户滚动查看整个表。

我希望能够强制col-8列只使用显示表所需的空间，但是我希望该列与该列一起展开。因此，一个5行的表将导致col-8使用比10行的表更少的空间。

但是，我也希望能够将最大高度强制到col 8上，这样该列的高度将仅与页面上剩余的垂直空间一样高，因此，col 8的最大高度应该是browser window - the height of the header。

所以，总结一下。

1. col-8包含不同height
2. col-8高度的表，应展开以容纳table
3. col-8高度，不应超过浏览器窗口的高度

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

Answer 1

但有了max-height而不是height，它将对国际海事组织作出反应。对吗？