使用 flex 样式 mat-table答案

【问题标题】：Style mat-table using flex使用 flex 样式 mat-table
【发布时间】：2018-10-18 16:33:58
【问题描述】：

我有一个垫表，我想使用 flex 对其进行配置以增长以使用整个浏览器可用空间并在记录数不合适时显示滚动条。

我设法通过将表格包装在一个 div 中并为该 div 分配一个静态高度来做到这一点，例如：

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

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

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

请看一下我在Stackblitz创建的项目

任何建议将不胜感激。

【问题讨论】：

【解决方案1】：

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

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

更新

这是使用 flex 的解决方案

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

【讨论】：

修订后的答案包括弹性解决方案。
谢谢，这非常有用，但是如果我添加另一个组件，假设浏览器的 20% 将覆盖可用空间。如果需要覆盖可用空间，我需要它增长。这甚至可能吗？
我认为您面临的挑战之一是在 stackblitz 中使用 flex。我又玩了一些，似乎有一个您无法控制的可扩展容器。在你的 stackblitz 项目的 index.thml 中，用其中的 20 个
text
替换所有代码，你会看到一个你无法控制的可滚动容器，因为它是用于将渲染视图嵌入到其中的 iframe “模拟”浏览器。您可能需要将其从 stackblitz 中移出，这样您就可以绝对控制根容器的高度，并且子容器可以通过 flex 继承。