Коврик-выдвижной ящик углового материала, полный рост, авто переполнение содержимого

Вчера я столкнулся с проблемой CSS, которая, похоже, связана с mat-drawer и Angulars router-outlet. У меня есть полный лист flexbox с двумя детьми. mat-toolbar вверху и пользовательский компонент app-sidenav внизу. Это отлично работает, и app-sidenav заполняет остальную часть страницы, так как flexbox растягивается. Посмотрите на эту упрощенную настройку, прежде чем продолжить:

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

Связанный css

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

В компоненте app-sidenav теперь у меня есть следующий шаблон

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

И связанные стили

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

Это прекрасно работает, и высота подходит, если нет содержимого, превышающего высоту app-sidenav. Полоса прокрутки появляется на внешнем компоненте flexbox, а не на теге main. Я также проверил !important на высотах, а также 100vh, но безуспешно. Итак, как мне заставить работать overflow-y в основном теге?

Я почти уверен, что есть простой трюк, но я не могу понять это. Спасибо за вашу помощь. Ура !

Редактировать:

Я сделал stackblitz для этой проблемы. Когда вы переходите к компоненту ciao , вы видите, что полоса прокрутки появляется в корне документа, а не в основном теге.