Add vertical scroll bar to mat-expansion-panel

Question

I'm using Material Design Expansion Panel to display data in a hierarchical way is illustrated here :

This the way I implement it so I can show multiple AREAs which can contain one or more TEAMs

<mat-accordion>
  <mat-expansion-panel
    *ngFor="let area of myAreas; let index = index; first as firstExpansion"
    [expanded]="firstExpansion">
    <mat-expansion-panel-header>
      <mat-panel-title> TITLE </mat-panel-title>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent >
      <mat-selection-list #teams [multiple]="false">
        <mat-list-option
          *ngFor="let team of area.teams"
          [value]="team">
          <div accordion-button">
            {{team.displayName}}
          </div>
        </mat-list-option>
      </mat-selection-list>
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

This way I'm able to show all my areas while expanding the first one to show its embedded teams. Now the problem is how to make that list scrollable without exceeding the height of the space between Search block and Add new area button like this: