How to make div resize and scrollable between sibling divs - html

Question

Basically I have this Angular material side nav with expandable navigation items
I want to make the second div scroll able when the items expand beyond the third div and also resizable so when I decrease the window size, it should always resize to fit between div 1 and and div 3.
I managed to implement the scrolling behavior with the following style applied:
title-div {
min-height: 10%;
}
items-div {
height: 80% //To force the info-div to be positioned at the bottom
max-height: 80%
overflow: auto;
}
info-div {
min-height: 10%;
}
However the resizing is not working properly. At a certain height the info-div(3) starts to get cut off instead of the item-div(2) resizing smaller for the info-div to fit in. How can I make this work?

Answer 1

You could easily achieve something like this using flexbox:
<div id="sidenav">
<div>Title</div>
<div class="items">
<div>item</div>
<div>item</div>
<div>item</div>
</div>
<div>Information</div>
</div>
#sidenav{
display: flex;
flex-direction: column;
height: 100%;
}
#sidenav .items{
flex-grow: 1;
overflow-y: auto;
}
https://codepen.io/Ploddy/pen/yLNaLyQ?editors=1100

Answer 2

when you set your second dives height to the relative space it should take and use overflow: auto it should work.
a POC:
* {
box-sizing: border-box;
margin: 0;
}
.container {
width: 100px;
border: solid 2px;
}
.one,
.three {
background: blue;
border: solid 1px;
height: 50px;
padding: 10px;
}
.two {
padding: 10px;
overflow: auto;
height: calc(100vh - 100px);
}
<div class="container">
<div class="one">title</div>
<div class="two">
body<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
<br> body
</div>
<div class="three">title</div>
</div>