Problemas con el scroll en el li

Buenas tardes,

Estoy teniendo problemas con un desarrollo en CSS. Quiero que aparezca un scroll en la parte derecha de forma vertical, una sola vez en el acordeón mostrando el resto de los datos.
Sin embargo con lo que tengo desarrollado aparece todas las veces que itera, en este caso 3 veces en cada li, sin mostrar el tercer dato solo el scroll.
Creo que el problema está con la interferencia entre los max-height.

No he tocado mucho css y me falta conocimiento.
Os dejo el código en HTML:

<mat-accordion class="card-container-qualitat">
    <mat-expansion-panel class="card" [expanded]="false" [disabled]="noResults">
        <mat-expansion-panel-header>
            <mat-panel-title class="title-card-header-valoracio">
                <img [src]="'assets/images/cronicitat/blue/qualitat-vida.svg'" style="width: 16px" />
                <span> Qualitat de vida </span>
            </mat-panel-title>
            <mat-panel-description class="" *ngIf="noResults">
                <div class="no-results-container-cronicitat">
                    <img class="no-results-image-valoracio" [src]="'assets/images/cronicitat/sense-dades.svg'" />
                </div>
                <div class="no-results-text-valoracio">No s'ha trobat resultats de la cerca.</div>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <ng-container *ngIf="diagnostics.length > 0">
            <ul class="qualitat-card-body" *ngFor="let diagnostic of qualitatVidadGroup">
                <li class="valoracio-item">
                    <div class="diagnostic-name">
                        <span class="diagnostic-name-text">{{ diagnostic?.nom }} </span>
                    </div>
                    <div class="diagnostic-interpretation">
                        <span class="diagnostic-interpretation-text">{{ diagnostic?.interpretacio }} </span>
                    </div>
                    <div class="diagnostic-last-value">
                        <span *ngIf="diagnostic?.ultimValor" class="diagnostic-last-value-container diagnostic-last-value-text">{{ diagnostic?.ultimValor }} </span>
                        <span class="valoracio-date">{{ diagnostic?.data }} </span>
                        <mat-divider class="divider-valoracio" inset vertical></mat-divider>
                    </div>
                </li>
            </ul>
        </ng-container>
    </mat-expansion-panel>
</mat-accordion>

CSS:

.card-container-qualitat {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 10px 8px 10px 8px;
    width: 865px;
    max-height: 155px;
}
.qualitat-card-body {
    list-style-type: none;
    max-height: 100px;
    width: 420px;
    overflow: auto;
    overflow-y: auto;
}