Is it possible to size a div element so that it occupies all available remaining space, but if its content exceeds the available space, the overflow is contained within without resizing or changing the height of the element? The element should have a fixed height that fills the remaining space.
My example utilizes Bootstrap.
In the code snippet provided above, the red box represents the area of the screen affected by the code. The horizontal length of the red square (poorly drawn) should never be less or more than the screen height minus the combined heights of all other elements on the screen.
I want the sizes of the elements to stay consistent and the list to scroll within its parent column.
I've achieved a similar effect by setting the max-height to 520px:
<div class="row mx-0 flex-grow-1" style="max-height: 520px;">However, I am looking for a responsive solution that works regardless of screen height.
Update
After applying @RokoC.Buljan's answer to my work, I obtained the following layout with the desired nested scrollable areas. Thanks again for the assistance. This example uses Bootstrap 5.1.
html {
font-size: 14px;
position: relative;
height: 100%;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.site-root {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
}
.footer {
position: static!important;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011d011c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body class="site-root h-100">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<h3>Header</h3>
</div>
</nav>
</header>
<main class="container d-flex flex-column flex-grow-1 overflow-hidden">
<div class="row"><h1>Jumbotron</h1></div> <!--Hub Jumbotron-->
<div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
<div class="col-3 flex-grow-1 overflow-auto">
<!--Left Side Panel-->
<h3>Left Panel</h3>
</div>
<div class="col-9 d-flex flex-column flex-grow-1">
<div class="row"><h3>Hub Nav</h3></div> <!--Hub Nav-->
<div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
<div class="col-3 d-flex flex-column flex-grow-1">
<!--Friend List-->
<div class="row"><h4>Friends List</h4></div>
<div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
<div class="col flex-column flex-grow-1 overflow-auto">
<div class="p-2">Friend</div>
<div class="p-2">Friend</div>
<div class="p-2">Friend</div>
...
</div>
</div>
</div>
<div class="col-9 d-flex flex-column-reverse flex-grow-1">
<!--Chat-->
<div class="row"><h4>Message Bar</h4></div>
<div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
<div class="col flex-grow-1 overflow-auto">
<p style="height:300vh;">1. Some paragraph to force scrollbars...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="site-footer" class="border-top footer">
<div class="container">
<h3>Footer</h3>
</div>
</footer>
</body>