mat-card-content 溢出角材料卡

Question

使用角材料 8.2.0

我已经从角度材料原理图创建了一个仪表板模板。这会在 mat-grid-list 中创建许多 mat-grid-tile。每块瓷砖都有一张垫卡

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

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

一个简单的例子证明了这一点：

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

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

Answer 1

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

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