I have app component which has following html

<app-header></app-header>
<div class="main-container">
    <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

with css

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-container {
  display: flex;
  flex-grow: 1;
  overflow: auto;
}

and component in router-outlet looks like this:

<div id="home">
</div>

<div id="about">
</div>

<div id="contact">
</div> 

I'm trying to add scrollToAnchor, but it's not working. It works if I remove overflow: auto from main container, but then whole page is scrollable, and header and footer are not static. Is there way to enable scrollToAnchor with flex layout and only scrolling middle part of app? I'd prefer flex instead of position: fixed.

main.component.ts:

constructor(
        router: Router,
        viewportScroller: ViewportScroller
    ) {

        router.events.pipe(
            filter(e => e instanceof Scroll)
        ).subscribe(e => {
            e = e as Scroll
            if (e.anchor) {
                // anchor navigation
                viewportScroller.scrollToAnchor(e.anchor);
            }
        });
    }

html that triggers scrollToAnchor

<a mat-button routerLink="/" fragment="home"></a>
<a mat-button routerLink="/" fragment="about"></a>
<a mat-button routerLink="/" fragment="contact"></a>