I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space.
However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space.
It is crucial that the body does not have a scroll bar (hence the use of 100vh for the container) and the header takes up only the necessary space. This constraint cannot be changed.
If I apply "100vh" to each column, they extend beyond the bottom of the page.
If I add overflow:hidden to the container-xxl, it stops the scrolling at that point, but important information from the columns below the page goes missing. You can see this as the scroll bars extend above the top of the page.
While I know how to achieve this using JavaScript, I am certain there must be a CSS solution for this.
Something similar to the example image:
https://i.sstatic.net/re0U9.jpg
Find the complete code on: Codepen
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c5749574b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-xxl flex-grow-1" style="height: 100vh;">
<div class="row h-100">
<div class="col-2" id="left">
side bar menu
</div>
<div class="col-12 col-md-10 h-100 d-flex flex-column" id="right">
<div class="row">
<div class="col-12">
Header with some stuff ...
<p>some stuff of the header</p>
</div>
<div class="row h-100" id="threecolumns" style="background-color:#fee">
<div class="col-4 h-100 overflow-auto" style="background-color:#f2e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
<div class="col-4 h-100 overflow-auto" style="background-color:#d3e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
<div class="col-4 h-100 overflow-auto" style="background-color:#e4e">
column with its own scroll
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a071a05">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>