angular-material - mat-card-content 溢出角度 Material 卡

Question

使用角度 Material 8.2.0

我已经从 angular material schematics 创建了一个仪表板模板.这会在 mat-grid-list 中创建多个 mat-grid-tile。在每个方 block 中都有一张垫卡

现在我正在尝试将 google map 和一些 charts.js 放入生成的卡片的内容部分。

由于我需要为 map 和图表指定容器 div 的高度，我希望只需使用 height:100% 即可。但是，当在 mat-card-content 上使用 height:100% 时，它会溢出父 mat-card。

一个证明这一点的简单例子是:

https://stackblitz.com/edit/angular-material-ucak6j

对问题的任何提示或潜在的解决方法表示赞赏。

Answer 1

当您在 block 元素内的元素上使用 height: 100% 时，它使用父元素的高度。但是这个父元素是 mat-card，它还包含 mat-card-header，因此您需要为其留出空间。解决这个问题的最简单方法是在 mat-card 上使用 flexbox 布局:

.dashboard-card-content {
  height: 100%;
  background-color: red;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
}