matSideNav showing its own scroll with virtual scroll

Question

I am using a list of expansion panels inside virtual-scroll using scrollWindow, it works fine until I put this virtual scroll in matSideNav.

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
    <mat-accordion multi>
      <cdk-virtual-scroll-viewport itemSize="50" scrollWindow>
        <mat-expansion-panel *cdkVirtualFor="let item of items">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{item}}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div>
            <div>
              Content for {{item}}
            </div>
            <div>
              <button mat-raised-button color='accent'>OK</button>
            </div><div>
              <button mat-raised-button color='accent'>OK</button>
            </div><div>
              <button mat-raised-button color='accent'>OK</button>
            </div>
          </div>
        </mat-expansion-panel>
      </cdk-virtual-scroll-viewport>
    </mat-accordion>
</mat-sidenav-container>

when I expand an expansion panel, the side-nav shows its own scroll instead of varying the height of the virtual scroll.

here is the scenario.

steps to recreate the issue

• scroll to the bottom
• expand the last item

I am using:

• angular15
• material-design 15