how to make mat-menu which should not overlap on the trigger

I have a long list in mat menu which should not overlap on the trigger

here, I am not able to see trigger if the list is more its overlapping on trigger

https://stackblitz.com/angular/egdpolqbbgp?file=src/app/menu-overview-example.html

<!-- #docregion mat-menu-trigger-for -->
<br/>
<br/>
<br/>
<br/>
<br/>
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<!-- #enddocregion mat-menu-trigger-for -->
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>

<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>

<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 1</button>
</mat-menu>

Continue reading...