在 <mat-list-item> 中使用多个 <mat-chip> 标签

Question

我在标签<mat-list-item> 中使用了多个<mat-chip> 标签。我的问题是下一个<mat-list-item> 不会下移。它只是保持相同的位置，几乎不可读。我用过matLine，但这似乎不是解决方案。

<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine> {{message.from}} </h3>
    <p matLine>
      <span> {{message.subject}} </span>
      <span class="demo-2">
                        <mat-chip-list>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>

                </mat-chip-list>
      </span>
    </p>
  </mat-list-item>
</mat-list>

请给自己拍张照片：https://stackblitz.com/edit/list-examples-jxhvsn?file=index.html

我该如何解决这个问题？

Answer 1

我发现高度是问题所在。

mat-list-item {
  height: auto !important
}

这会解决它。