使用flex样式的垫子桌子

Question

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

我可以通过将表格包装在div内并为此div分配静态高度来做到这一点，例如：

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

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

.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;
}