Переполнение содержимого mat-card angular Карта материала

Question

Используя angular материал 8.2.0

Я создал шаблон панели мониторинга из angular схем материалов . Это создает количество mat-grid-tile внутри mat-grid-list. В каждой плитке есть мат-карта

Теперь я пытаюсь разместить карту Google и несколько диаграмм. 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;
}