Angular Material手风琴组件中div文本上下溢出问题求助

根因分析 #

Angular Material 的 mat-list-item 组件默认针对单行文本场景设计，内置了固定高度、最小高度限制，外层 mat-nav-list 也会对内部列表项的布局规则做约束，所以当文本内容超过单行时，就会出现内容上下溢出容器的问题。你提到移除 mat-nav-list 后布局正常，就是因为去掉了外层的布局规则约束。

修复方案 #

方案1：覆盖默认样式实现高度自适应 #

直接在你的.item自定义样式中增加如下配置，覆盖mat-list-item的默认高度限制：

.item {
  background-color: aqua;
  margin-bottom: 5px;
  /* 新增自适应高度相关配置 */
  height: auto !important;
  min-height: unset !important;
  padding: 8px 16px !important; /* 上下边距可根据视觉需求自行调整 */
}

说明：如果你的样式写在全局样式文件中、或组件关闭了样式封装，也可以通过提高选择器优先级的方式替代!important实现样式覆盖。

方案2：替换组件摆脱默认约束 #

如果你不需要mat-nav-list、mat-list-item自带的导航无障碍支持、路由高亮等特性，也可以直接把mat-list-item替换为普通的<div>元素，完全摆脱Material组件的默认样式约束，自主实现所有样式规则。

修复后文本会自动换行，容器高度会跟随内容自动调整，不会再出现溢出问题，同时也支持自定义其他样式。

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