Ваша проблема в том, что когда содержимое вашего приложения переполняет страницу, это не тег <body>, который становится прокручиваемым, а скорее дочерним по отношению к тегу <body>.
Чтобы браузер правильно обрабатывал нумерацию страниц, вам нужно обновить стили вашего приложения, чтобы прокручивать был тег <body>. Это аналогично тому, как в материалах документа говорится, что вам нужно использовать опцию fixed mat-sidenav на мобильных устройствах.
Глядя на ваше примерное приложение, я вижу, что телотег имеет высоту 10 пикселей.Весь письменный контент имеет position: absolute, который отбрасывает макет.Обновите стиль так, чтобы тег body имел полную высоту, и все должно работать (и я только что проверил это в вашем примере stackblitz и могу подтвердить, что это решает проблему).
Как одно решение, просто обновите sidenav-responsive-example.cssфайл для удаления position: absolute устраняет проблему.
.example-container {
display: flex;
flex-direction: column;
top: 0;
left: 0;
right: 0;
}
Обновление
На самом деле, ваш пример stackblitz печатается нормально для меня (в Google Chrome) без изменений.