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

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>

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?