Scrollable div/panel in flexbox layout - html

Question

I need to make panels/divs scrollable, but they have dynamic heights. So far, the only solutions I found are using arbitrary heights in various units, which I would like to avoid. I’m trying to go the Flex route but I’m missing something...
.app {
width: 100%;
height: 100vh;
background-color: #f4f3ef;
display: flex;
flex-direction: column;
border: 2px solid red;
.topbar {
border: 2px solid lightblue;
padding: 8px;
}
.container {
display: flex;
border: 2px dashed lightpink;
.panel {
border: 2px solid lightgreen;
background-color: #f4f3efbb;
padding: 8px;
flex: 1;
.tabs {
display: flex;
justify-content: center;
border-bottom: 1px solid lightgray;
padding-bottom: 8px;
& > button:not(:first-child) {
margin-left: 20px;
}
}
.input-container {
padding: 8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid lightgray;
}
.scrollable {
overflow-y: auto;
p.message {
color: salmon;
font-weight: 500;
}
}
}
}
}
.note {
text-align: center;
}
<p class="note">The red border represents the viewport</note>
<div class="app">
<div class="topbar">Lorem ...</div>
<div class="container">
<div class="panel left-side">
<div class="tabs">
<button>Tab 1</button>
<button>Tab 2</button>
</div>
<div class="body">
<div class="input-container">
<input placeholder="Type something" />
<button>Send</button>
</div>
<divp class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem ...
Lorem ...
Lorem ...
</divp>
</div>
</div>
<div class="panel center-side">
<divp class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem ...
Lorem ...
</divp>
</div>
<div class="panel right-side">
<div class="tabs">
<button>Tab 1</button>
<button>Tab 2</button>
<button>Tab 3</button>
<button>Tab 4</button>
</div>
<div class="scrollable">
<p class="message">This panel should be scrollable if it overflows</p>Lorem...
</div>
</div>
</div>
</div>
Here’s a CodePen of a simplified version of my app: https://codepen.io/hubchau/pen/qBPqJRd

Answer 1

I set my content flexbox with min-height: 100%; and overflow: auto;:
https://codepen.io/logany-hi/pen/PoKLzWp?editors=1100
body {
overflow: hidden;
}
.body{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
}
/* SIDEBAR --------------------------------*/
.sidebar {
width: 340px;
color: #fff;
background: #021334;
}
.sidebar header {
text-align: center;
line-height: 50px;
border-bottom: 1px solid #fff;
background: #283562;
}
.sidebar ul {
list-style: none;
overflow: auto;
padding-left: 0;
height: calc(100vh - 50px);
margin-top: 2px;
}
.sidebar ul li.menuHeader {
padding: 15px;
color: rgba(255, 255, 255, 0.5);
border-top: 1px solid #021334;
border-bottom: 1px solid #021334;
}
.sidebar ul a {
position: relative;
display: block;
text-decoration: none;
padding: 15px 15px 17px 50px;
color: #fff;
border-bottom: 1px solid #283652;
}
.sidebar ul a:hover,
.sidebar ul a:active {
text-decoration: none;
background: #283652;
}
/* CONTENT ------------------------------------ */
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.breadcrumbs {
border-bottom: 1px solid #b6bcc6;
}
.breadcrumbs ul {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs ul li {
line-height: 50px;
display: inline-block;
vertical-align: text-top;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
width:100%;
}
.page-content {
padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<main class="body">
<nav class="sidebar">
<header>
Ortund
</header>
<ul>
<li class="menuHeader">Basics</li>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
<li class="menuHeader">Admin</li>
<li>Manage KPAs</li>
</nav>
<div class="main">
<div class="page-header breadcrumbs">
<ul>
<li>Home</li>
<li>.::.</li>
<li>KPAs</li>
</ul>
</div>
<div class="content">
<div class="box">
<div class="page-content">
<div style="margin-top: 5px;">
<h3>Add KPAs</h3>
</div>
<div style="padding: 20px 0;">
<div class="card" style="width: 800px; margin-bottom: 50px;">
<div class="card-body">
<form id="createForm" method="post">
<div class="form-group row pb-2">
<label class="col-sm-4" for="KPA_Evaluation_Id">Evaluation</label>
<div class="col-sm-8">
<select class="form-control" id="KPA_Evaluation_Id" name="KPA.Evaluation.Id">
<option value="">No evaluation</option>
</select>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 1</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 2</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 3</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 4</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="form-group row pb-2">
<label class="col-sm-4" for="item_Name">KPA 5</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="item_Name" name="item.Name" value="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4" for="item_Description">Description</label>
<div class="col-sm-8">
<textarea class="form-control" id="item_Description" name="item.Description">
</textarea>
</div>
</div>
<div class="fixed-bottom border-top p-3 bg-white" style="left: 340px;">
<button type="submit" class="btn btn-primary btn-sm ly-button text-white save">Create</button>
<a onclick="window.history.go(-1); return false;"
class="btn btn-outline-secondary btn-sm ly-button"
style="margin-left:10px; cursor:pointer;">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>