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

Question

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

我需要在卡片内保持桌子高度，它应该是响应式的

这里是working example

电流输出

1. 当分页值改变时如何添加滚动条（如果可能的话）
2. 如何保持卡片内的桌面高度

Answer 1

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

Answer 2

只需从引导程序中获取一张表即可解决问题