Overflow hidden on parent, but auto on child doesn't work

I have a sidebar with two divs: the first one on top and the second one at the bottom, when resizing the window I want the div at the bottom to hide what is above except for one element that would be set to overflow: auto when visible. I tried everything I could imagine but I can't figure out how to do it only in CSS.

HTML

<aside>
  <div class="sidebar-top">
    <div class="overflow-hidden">
    </div>
    <div class="overflow-hidden">
    </div>
    <div class="overflow-hidden">
      <ul class="overflow-auto">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </div>
  </div>
  <div class="sidebar-bottom">
  </div>
</aside>

CSS would be

.overflow-hidden {
  overflow-hidden;
}

.overflow-auto {
  overflow-auto;
}

.sidebar-top {
  height: calc(100vh - var(--sidebar-bottom));
}

.sidebar-bottom {
  height: var(--sidebar-bottom)
}