Flex 布局问题 - Angular Material table - 不适合 div

Question

我正在尝试在 flex 的帮助下创建响应式布局。但我最终 height 不一致。当更改 pagination 值并重叠在卡片下方时，我的 mat-table 高度超出了外部 div。我以为 overflow: auto 会帮助我，但似乎没有。

我需要在卡内保持 table 高度 并且它应该是响应式的

这里是 working example

当前输出

1. 如何在分页值改变时添加滚动条（如果可能的话，slim）
2. 卡内如何保持table高度

Answer 1

只需从 bootstrap 得到一个 table，问题就解决了

Answer 2

将 overflow-y: scroll; 添加到 .card-02 class。这是一个工作代码 https://stackblitz.com/edit/angular-euabq5-g8jjgc?file=app/table-pagination-example.css