Делая прокручивать

Question

Я пытался составить прокручиваемый список матов. Однако присвоение ему атрибутов height, max-height и переполнения: auto не помогло вообще. На самом деле это просто что-то странное в пользовательском интерфейсе

В основном, полоса прокрутки (так что я предполагаю, что атрибут переполнения) фактически применяется не к mat-list, но только к одному элементу mat-list? Это мой HTML код:

<mat-list *ngFor="let invoice of (history | async)">
  <mat-list-item *ngIf="!invoice.negative"
                 style="color: mediumseagreen; font-size: 20px; margin-top:2px">{{invoice.detail}}</mat-list-item>
  <mat-list-item *ngIf="invoice.negative" style="color: orangered; font-size: 20px; margin-top:2px">
  {{invoice.detail}}</mat-list-item>
</mat-list>

А это файл. css относительно mat-list:

mat-list {
  margin: 5px;
  row-gap: -10px;
  overflow: auto;
}

Внутри. css файла I Вы на самом деле никогда не упоминали тег mat-list-item, поэтому мне интересно, как это возможно, у кого-нибудь есть идеи?

PS: Да, клик - это круто, я знаю ...

Вот ссылка на стек, но я изменил некоторые вещи, например, жестко закодировал список для простоты https://stackblitz.com/edit/angular-subrnh