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

Question

我正在使用多个 <mat-chip>标签内的标签 <mat-list-item> .我的问题是下一个 <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
}

这会解决它。