使用 flex 样式 mat-table

Question

我有一个 mat-table，我想使用 flex 配置它以使用整个浏览器可用 space 并在记录数量不适合时显示滚动条。

我设法通过将 table 包裹在 div 中并为此 div 分配静态高度来做到这一点，例如：

.example-container {
  height: 800px;
  overflow: auto;
}

但是当我尝试使用 flex 时，table 只会使可用高度超载：

.example-container {
  flex: auto;
  overflow: auto;
}

请看一下我在Stackblitz

中创建的项目

如有任何建议，我们将不胜感激。

Answer 1

您需要在容器中定义某种高度才能使其正常工作。这将是浏览器垂直高度的 90%。

.example-container {
  height: 90vh;
  overflow: auto;
}

更新

这是使用 flex 的解决方案

.example-container {
  flex-grow: 1; 
  flex-basis: 90vh;
  overflow: auto;
}

Style mat-table using flex