div中的文本溢出到顶部和底部

Question

我有一个目前无法解决的问题。这是关于我制作的一个有角度的材料手风琴，它包含一系列按钮（由带有文本的 div 块构建）。我注意到我对超过一行的文本有问题。然后文本在 div 的末尾中断，但不幸的是，它没有像往常一样进入 div 容器，而是超出了 div 的顶部和底部。

现在我尝试了不同的方法，例如使用溢出方法设置 Div 样式，调整高度，...，但到目前为止还没有找到解决方案。

我很乐意得到答案，如果您需要更多信息，请告诉我！

Stackblitz-示例：https://stackblitz.com/edit/angular-side-nav-dynamic-expansive-menu-cg452o?embed=1&file=main.ts

.item {
  background-color: aqua;
  margin-bottom: 5px;
}

.category {
  margin-bottom: 5px;
  margin-top: 5px;
}

<mat-nav-list>
  <mat-accordion>
    <mat-expansion-panel class="category">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <!-- Category -->
          <div>
            Category
          </div>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-list-item class="item">
        <!-- Items  -->
        <div>
          <div>Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item                    Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item Item </div>
        </div>
      </mat-list-item>
    </mat-expansion-panel>
  </mat-accordion>
</mat-nav-list>

编辑：没有 mat-nav-list 它可以工作，调整浏览器窗口大小时没有文本覆盖，但没有样式访问：

Answer 1

该问题与 Angular 提供的“mat-list, mat-item”组件有关。我想我可以用一个简单的“高度：自动”来解决这个问题。不幸的是，这没有用，我开始困惑。最后我不得不在汽车后面加上一个 !important，然后一切正常。所以最终的解决方案如下：

.item {
  height: auto !important;
}