在<mat-list-item>中使用多个<mat-chip>导致列表项重叠的解决方法

我来帮你搞定这个问题！你遇到的核心问题是：mat-list-item 默认高度是固定的，当内部的 mat-chip-list 因芯片数量过多换行后，列表项没有自动撑开高度，导致下一个列表项往上挤压，和当前项内容重叠。

为什么会出现这个问题？ #

Angular Material的 mat-list-item 默认采用flex布局，它的高度基于内部带 matLine 指令的元素高度计算。你把芯片列表放在了同一个 p 标签的 matLine 里，而 mat-chip-list 默认是 inline-flex 布局，换行后无法自动撑开父元素高度，导致整个列表项的高度没适配芯片的实际占用空间。

解决方案： #

这里有几个简单有效的方法，你可以按需选择：

方案1：把芯片列表放在单独的 matLine 中

将芯片列表从原有 p 标签分离，放到单独的带 matLine 指令的容器里。Angular Material会自动识别这是列表项的一行，从而撑开列表项高度。

修改后的代码示例：

<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine> {{message.from}} </h3>
    <p matLine> {{message.subject}} </p>
    <!-- 单独的matLine容器放置芯片列表 -->
    <div matLine>
      <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-list>
    </div>
  </mat-list-item>
</mat-list>

方案2：修改 mat-chip-list 的显示模式

给 mat-chip-list 添加 display: block 样式，让它占据整行空间，从而撑开父元素高度：

<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 style="display: block;">
          <mat-chip color="primary" selected>Tag</mat-chip>
          <!-- 剩余芯片元素... -->
        </mat-chip-list>
      </span>
    </p>
  </mat-list-item>
</mat-list>

方案3：自定义CSS调整列表项高度

如果上面的方法不适用，你可以直接给 mat-list-item 设置自动高度，强制它根据内容自适应：

mat-list-item {
  height: auto !important;
  padding-bottom: 16px; /* 可选，增加底部间距让排版更美观 */
}

注意：使用 !important 是为了覆盖Angular Material的默认样式，如果你给列表添加了自定义类名，用更具体的选择器可以不用 !important。

效果验证 #

以上任意一种方法都能让 mat-list-item 根据内部芯片的高度自动调整，下一个列表项会自动向下偏移，不会再出现内容重叠的情况。

内容的提问来源于stack exchange，提问作者Reza Saadati