Angular Nested mat-menu expansion

mat-menu gracefully handles expansion when opening near the bottom of a page (if too close to bottom of page, it will open up) but what if there is an expandable button within the mat-menu. Expansion will always open downwards and off the screen.

A workaround seems to be to programmatically scroll screen by 1 pixel. This allows the mat-menu to recalculate its position and pop up to a viewable area, but it is quite a hack and not performant on IE browser. Is there a more elegant solution?

Sample:

<mat-menu #menu="matMenu" xPosition="before"(closed)="onMenuClosed()">
  <ng-template matMenuContent>
    <div #popoverMenu>
      <button mat-menu-item class="primary-action"
          [ngClass]="{'expanded-section': isPanelExpanded }"
          (click)="expandMenuOptions($event)">
 .
 . 
 .