Угловой 6: Мат-карта делает прокрутку содержимого страницы без использования фиксированной подставки

Question

У меня есть верхняя навигация, боковая навигация и основное содержание страницы. При нажатии вкладки на боковой навигационной панели должны перенести div, связанный с вкладкой, в верхнюю часть страницы (Это другая проблема, с которой я сталкиваюсь, поскольку метод scrollTop из JS не работает, но я могу использовать scrollIntoView ( ) пока что-нибудь получится)

шаблон

<mat-card class="main-card">
  <mat-card-title>Some title</mat-card-title>
  <mat-card-content class="main-content">
    <div class="div1">Div1 content</div>
    <div class="div2">Div2 content</div>
    <div class="div3">Div2 content</div>
  </mat-card-content>
</mat-card>

CSS

.main-card {
  overflow: auto;
  height: 700px;
}

.main-content {
  height: 1000px;
  overflow: auto;
}

сиденав пунктов

<div class="side-nav">
  <div class="mat-list-item" (click)="handleElemScroll(div1)">
    <span>Div1</span>
  </div>
  <div class="mat-list-item" (click)="handleElemScroll(div2)">
    <span>Div2</span>
  </div>
  <div class="mat-list-item" (click)="handleElemScroll(div1)">
    <span>Div2</span>
  </div>
</div>

на основной карточке я не могу добавить пропеллер высоты, даже если я использую! Важный. Я сталкивался с этой проблемой несколько раз, используя угловой материал. Я нажимаю на прокрутку, но в середине прокрутки вся страница начинает прокручиваться. Несмотря на то, что высота содержимого моего мат-карты больше, чем сама мат-карта.

Несколько вопросов, если кто-нибудь может мне помочь 1. Почему вся моя страница начинает прокручиваться на полпути? 2. Как сделать прокрутку без моей боковой и верхней флешки? Является ли моя идея использовать переполнение и сделать внутреннюю высоту контейнера больше, чем его родительский контейнер правильной идеей?

Спасибо за любую помощь