CSS Flex - how do I make div content scrollable? - html

Question

I'm trying to create a sidebar which has 2 boxes. Each box can contain any number of list items(could be hundreds of items), but it's likely that the first will contain only a few items, and the second will contain many more.
I have the following (created in ReactJS):
<div class="drawer">
<div class="drawerContainer">
<div class="sideboxWrapper">
<SideBox header="Box 1" />
<SideBox header="Box 2" />
</div>
</div>
</div>
Each SideBox generates the following structure:
<div class="sidebox">
<h2 class="boxheader">{header}</h2>
<div class="boxContent">
<ul class="sideboxList">
<li class="listItemText listItemTextCurrent">Item 1</li>
<li class="listItemText listItemTextCurrent">Item 2</li>
... more items ...
</ul>
</div>
</div>
So, first of all, I want the boxes to fill the sidebar, but not overflow it. If the boxes are short enough to both fit, then they should both take up as much space as they need, and any remaining space is left blank. If they don't both fit, then they should take up the available space, and the boxContent div should become scrollable.
.drawer {
flex: 0 0 240px;
height: 100%;
overflow-y: hidden;
padding: 10px 0;
}
.drawerContainer {
height: inherit;
overflow: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
.sideboxWrapper {
display: flex;
flex-direction: column;
height: inherit;
overflow: hidden;
}
.sidebox {
margin: 10px;
padding: 0px;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
}
.boxContent {
overflow-y: auto;
}
The problem I'm having is that when one of the lists is very long, the sideboxes just expand to fit it, even if that means going outside the sideboxWrapper (the overflow is hidden, so the part of the sidebox outside the sideboxWrapper can't be read). What I want to happen is that the flex layout arranges the sideboxes to fit inside the sideboxWrapper, and then the boxheaders are shown and the boxContent is resized (with scrollbars) to fit within the remaining space. So, a long list will have scrollbars.
How can I achieve this?

Answer 1

here is what could be your CSS , I added border so you can see where stands some of your boxes. Using flexbox on so many levels requires to follow clearly what you are doing and see where flex is avalaible and needed.
* {
box-sizing: border-box;
}
.drawer {
width: 240px;/* without a flex parent that works too */
height: 100vh;/* example for a full screen height */
overflow-y: hidden;
padding: 10px 0;
border: solid;
}
.drawerContainer {
height: 100%;
padding-bottom: 10px;
padding-top: 10px;
}
.sideboxWrapper {
display: flex;
flex-direction: column;
height: 100%;
border: solid green;
overflow: hidden;
}
.sidebox {
margin: 10px;
padding: 0px;
flex-basis: 50%;/* make it half */
display: flex;
flex-direction: column;
min-height: 0;/* what is needed */
}
.boxContent {
flex-grow: 1;
overflow-y: auto;
}