如何使PrimeNg列表框的高度与父级匹配

Question

我有一个页面，其中有两个部分：

1. 固定大小的div，固定在页面底部
2. 另一个div，它填充了屏幕的其余内容（主要内容）。其中包含一个PrimeNg列表框。

div的位置和大小可以通过flex来实现。

在移动设备上查看时，我希望内容适合屏幕显示，即：

1. 底部div固定在底部并且可见
2. 如果列表框扩展通过屏幕的其余内容，则该滚动框将变为可滚动。

但是，默认情况下，PrimeNg列表框会显示整个列表，并将父div扩展开，强制其大于所需的范围。

我几乎可以通过设置属性[listStyle]="{'max-height':'300px}"来解决此问题，但是我不想有固定的大小，只需填充父项即可。

我在https://stackblitz.com/edit/angular-sbkxxx创建了一个示例。因此，如果要在移动设备上查看此图片，我希望它看起来像：