Calculate sidebar height without specifying it

Question

I have a web app where the layout is created as follows:

• Toolbar
• Sidebar
  • Sidebar head
  • Sidebar body
• Content

Currently is set up like this:

body {
  display: flex;
  flex: 1;
  height: 100vh;
  margin: 0;
}

#overlay {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: gray;
}

#toolbar {
  background-color: blue;
  padding: 10px
}

#sidebar {
  background-color: red;
  width: 200px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

#sidebar-head {
  background-color: green;
  padding: 10px;
}

#sidebar-body {
  height: calc(100vh - 144px);
  background-color: aqua;
  display: flex;
  flex: 1;
  overflow: auto;
}

<div id="overlay">
    <div id="toolbar">
      <p>Toolbar</p>
    </div>
    <div id="sidebar">
      <div id="sidebar-head">
        <p>Sidebar Head</p>
      </div>
      <div id="sidebar-body">
        <ul>
          <li>Sidebar Body</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
        </ul>
      </div>
    </div>
  </div>

My question is: is it possible to somehow set up the layout without specifying the height of the sidebar body like height: calc(100vh - 144px);. I'm asking this because in my app the toolbar has a lot of items, so when the user has a smaller screen, the toolbar changes its height, and the calculation height: calc(100vh - 144px); becomes irrelevant, because the height is changed. Obviously, I can set up a different height for every breakpoint where the toolbar height changes, but I really want to avoid that route if possible.