I'm curious about how to implement a scroll-bar on a div using flexbox CSS.
To better illustrate the issue, I've provided an example below:
* {
box-sizing: border-box;
}
.flex-display {
display: flex;
align-items: stretch;
height: 100%;
}
.tree-container {
border: 1px groove gray;
padding: 10px;
width: 25%;
height: 100%;
}
.detail-container {
border: 1px groove black;
padding: 10px;
width: 75%;
height: 100%;
flex: auto;
}
#ViewContainer {
display: flex;
flex-direction: column;
align-items: stretch;
}
#Header {
border: 1px ridge;
display: block;
}
#Detail {
border: 1px ridge;
overflow-y: auto;
}<div class="flex-display">
<div class="tree-container">
HERE COMES A TREE
</div>
<div class="detail-container">
<div id="MainContainer">
<div id="ViewContainer">
<div id="Header">
This is going to be my Header View with Fixed Height of Content.
</div>
<div id="Detail">
<h2> Set scrollbar on this div to utilized remaining height of browser window without showing scrollbar on Browser.</h2>
<div>
<p>
HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
</p>
</div>
<div>
<p>
HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
</p>
</div>
/* Remaining code here */
</div>
</div>
</div>
</div>
</div>Click the link to view it in the pen. CodePen
If you encounter a similar situation, check out this resource: Scrolling a flexbox with overflowing content
I would greatly appreciate any input or suggestions regarding this matter.