I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire row.
for (let i = 0; i < 20; i++) {
$("#main-left").append("<div>" + i + "</div>");
}html,
body {
height: 100%;
max-height: 100vh;
}
#main {
background-color: cyan;
min-height: 100vh;
}
#main-right {
background-color: red;
}
#main-left {
background-color: pink;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid d-flex flex-column" id="main">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<d class="navbar-brand">Header</d>
</div>
</div>
</nav>
<div class="row d-flex flex-grow-1 " id="main-row">
<div class="col-5 d-flex flex-column" id="main-left">
</div>
<div class="col-2" id="main-center">
</div>
<div class="col-5" id="main-right">
</div>
</div>
</div>