How to avoid overlapping of text in Angulars <mat-list>

Question

I have a problem with the < mat-list > and the associated < mat-list-item > of Angular. Namely the text which is in < mat-list-item > overlaps the texts of the other items in case of e.g. a small width of the < mat-list > or when resizing the browser window.

My question now is: what adjustments do I have to make (probably in the CSS) so that the text just expands downwards like in a < div >.

Thanks in advance, if any info is missing, please let me know!

With < mat-list >:

<mat-list>
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
</mat-list>

With < div >:

<div>
    This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.
</div>

Answer 1

The answer was to set the height of the < mat-list > to "auto" with "!important".

.wrapper {
  height: auto !important;
}