Text in div overflowing to the top and the bottom

Issue

I have a problem that I can not currently solve. It's about a angular material accordion I have built, which contains a series of buttons (built from div blocks with texts). I noticed that I have problems with texts that have more than one line. The text then breaks at the end of the div, but unfortunately not down into the div container as usual, but out of the top and bottom of the div.

Now I have tried different approaches like Styling the Div with overflow methodes, adjusting the height, ... , but so far no solution found.

I would be happy about an answer, if you need more information, please let me know!

Stackblitz-Example: 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>

EDIT: Without mat-nav-list it is working, no text-overlays when resizing my browser-window, but no Styling-Access:

Solution

The problem occurred in connection with the "mat-list, mat-item" component provided by Angular. I thought I can solve the problem with a simple "height: auto". Unfortunately that didn't work and I started to puzzle. In the end I had to put an !important after the auto, then everything works. So the final solution is the following:

.item {
  height: auto !important;
}

Answered By - sarius