On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height.
I am trying to make the content of the tabs take up the full remaining height of the parent component.
https://i.sstatic.net/CmtLw.png
The structure of my tabs is simple and straightforward:
<div class="h-100">
<b-tabs content-class="mt-3 h-100">
<b-tab title="First" active>
<div class="tab-content">I'm the first tab</div>
</b-tab>
<b-tab title="Second">
<div class="tab-content">I'm the second tab</div>
</b-tab>
<b-tab title="Third">
<div class="tab-content">I'm the third tab!</div>
</b-tab>
</b-tabs>
</div>
Upon examining the DOM structure, I attempted to set height: 100% for the following classes:
.tabs, .tab-pane, .tab-content, .my-tab-content {
height: 100%;
}
However, this approach caused content overflow as the content div is a sibling to the tabs bar, resulting in it taking up 100% of the parent container's height.
I have considered calculating the height of the tabs bar and adjusting the content height using height: calc(100% - **px), but I believe there might be a more elegant solution available.
Explore the codesandbox example: https://codesandbox.io/s/optimistic-thunder-nwmzu