I'm struggling with making my sidebar and content area responsive in terms of height. I want them to adjust to fill the screen appropriately, rather than having a fixed height. The issue arises when I have varying content heights, such as when a page banner is displayed, causing the layout to respond inconsistently.
I've experimented with setting overflow-y: scroll on both the tab-content container and tab-panes individually, as well as adjusting heights and max heights. However, no matter what I try, if a tab-pane contains too many items, it overflows and causes the entire page to scroll instead of just adding a scrollbar to the tab pane.
I've provided an example on JS Fiddle to illustrate the problem. In the overview section with minimal inputs, there is no scrollbar. But in a large section like section 4, a page scrollbar appears due to uncontained overflow. This results in the sidebar also getting scrolled, making the layout messy.
My goal is to confine the content within the maximum available screen space, without relying on specific pixel or view-height values to stay responsive. Any solution should ensure that the content remains visible on the screen even when the alert div is uncommented.
Check out the JS Fiddle example
https://i.sstatic.net/sVvmN.png
https://i.sstatic.net/KuYtg.png
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d435d41">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f746a7468">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<body>
<style>
body {
display: flex;
height: 100vh;
flex-direction: column;
}
.sidebar {
max-width: 18rem;
}
.tab-content {
overflow-y: scroll !important;
max-height: 99%;
height: 99%;
}
.tab-pane {
overflow-y: scroll !important;
/* max-height: 99%; */
/* height: 99%; */
}
</style>
<div class="container-fluid flex-grow-1 row">
[Content of the page goes here]
</div>
</body>