How can I have a resizing sticky div between a non-sticky header and footer?

I’m trying to write a page where there must be a header and a footer with a body, all with unknown heights.

There must be a full scroll bar, which should shrink between the header and the footer whenever they’re visible.

I’ve written a jsfiddle to demonstrate the issue.

https://jsfiddle.net/solidshook/xej43g0c/4/

I’ve made something close to what I need with a flexbox, which looks good but isn’t quite what I want:

<div class='header'>
  i am the header
</div>
<div class='body'>
  <div class='sidebar'>
    <div class='sidebar-top'>
     top of sidebar
    </div>
    <div class='sidebar-bottom'>
     bottom of sidebar
    </div>
  </div>
  <div class='content'>
    i am the content
  </div>
</div>
<div class="footer">
  i am the footer
</div>

 .body {
   display: flex;
 }

.content {
  width: 50%;
  height: 1000px;
  align-self: flex-start;
}

.sidebar {
  width: 20%;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-top {
   position:absolute;
   top: 0;
}

.sidebar-bottom {
  position: absolute;
  bottom: 0;
}

.header, .footer {
  width: 100%;
  background-color: pink;
 }
 
}

I would really prefer to do this entirely with CSS, but if there’s anything else to be done I’d be happy to see

Does anyone know how I could achieve this?

Thanks!