Add scroll only for a tab content but not for a tab label in Clarity Tabs

I have a tab with long content in the project (StackBlitz ref is here).

So the scroll appears.

The corresponding code for it is

<div class="content-container">
        <div class="content-area">

            <clr-tabs>
                <clr-tab>
                    <button clrTabLink id="tab1-link">Tab1</button>
                    <clr-tab-content id="tab1-content" *clrIfActive="true">
                        ...
                    </clr-tab-content>
                </clr-tab>
                <clr-tab>
                    <button clrTabLink id="tab2-link">Tab2</button>
                    <clr-tab-content id="tab2-content" *clrIfActive>
                        Content2
                    </clr-tab-content>
                </clr-tab>
            </clr-tabs>

        </div>
    </div>

The problem is that the scroll covers tab labels and tab content. But I need it to cover only tab content so the tab labels would stay if I scroll down.

I tried to add the following styles to fix it

.content-area {
  overflow: hidden !important;
  height: 100%;
}

#tab1-content, #tab2-content {
  height: 100%;
  overflow: auto;
}

But this resulted in scroll disappearing at all. How can I add the scroll only for a tab content?

I found the following solution. I need to add to parent component content-area which contains all tabs the overflow property.

.content-area {
  overflow: hidden ;
}

It removes the current scrollbar. After that we can found the height of above elements using Chrome Dev Tools.

Now we should wrap the tab content into another div with some class (e.g. mytab-content).

    <clr-tab-content id="tab1-content" *clrIfActive="true">
        <div class="mytab-content">
        .......
        </div>
    </clr-tab-content>

And finally we should add the following styles for that class

.mytab-content {
  height: calc(100vh - 60px - 36px);
  overflow: auto;
}

It will add scroll only for tab content.