Angular 6 material app only printing first page

Question

I have an angular 6 app using angular material components (version 6). When I try to print it only prints first page (using Google Chrome). An example can be seen on stackblitz. I have tried number of media queries e.g. by setting the following styles but it does not make a difference

  body,
  html,
 .mainContainer{
  height: auto;
  overflow-y: visible;
  overflow-x: visible;
  }

Answer 1

I ran into a similar issue recently, Not a solution but a work around which I found after extensive code inspection.

I am using sidenav from angular material library v9.

@media print {
  .mat-drawer-container , .mat-drawer-content {
    overflow: visible !important;
  }
}

This seems to help and print all the pages.