<clr-main-container>
<div class="content-container">
<div class="content-area">
<div class="row">
<div class="col-xs-9" style="height:100%; border-right: 1px solid rgb(204, 204, 204); padding-right:0; overflow-y: auto;">
<div class="container">
left column
<clr-tabs (clrTabsCurrentTabLinkChanged)="onTabSelected($event)" (clrTabsCurrentTabIndexChanged)="onTabIndexChanged($event)" (clrTabsCurrentTabContentChanged)="onTabContentActivated($event)">
<clr-tab-link [clrTabLinkActive]="true">Tab 1</clr-tab-link>
<clr-tab-content [clrTabContentActive]="true" style="overflow-y: auto;">
LONG CONTENT GOES HERE;
</clr-tab-content>
<clr-tabs>
</div>
</div>
<div class="col-xs">
right column
</div>
</div>
</div>
</div>
</clr-main-container>
I need help with creating a layout that ensures my HTML document always occupies 100vh in height. If the content within a tab exceeds this height, it should scroll instead of extending beyond. However, the current implementation causes the entire page to scroll rather than just the tab content.
Can someone suggest alternative methods to achieve this? I've noticed setting manual height values works for scroll behavior but might not be the best solution. Perhaps having the content div inherit its parent's height could resolve the issue, but I'm unsure. Any advice would be appreciated!