Make sticky header on mat-tab-group

I'm using mat-tab-group and I want the tab headers to be fixed when I scroll down to the content. So, I fixed the height of tab content. I'm able to scroll through the content with fixed header. But, then I see two scroll bars on the page which is weird. Is there any other way that I can fix the tab headers while scrolling through the content? Attaching the snippet:

<mat-tab-group>
<mat-tab label="Tab 1">
<div style="overflow: scroll; height: 50%">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</mat-tab>
<mat-tab label="Tab 2">Tab 2</mat-tab>
<mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>




[Edit]: I'm more of looking to make header of mat-tab fixed. So, is there any straight forward way to do it instead of fixing height in styles?

Continue reading...