HTML sidebar with 3 lists that should grow or shrink

I'm trying to create a sidebar which has 3 lists.

1. when all lists are full, the first list should take 50% height and 2nd and 3rd list should take 25% height
2. when any list dont need its max space, another one should grow up and ignore its max height from point 1. (prio is first list 1 can grow, than list 2 can grow, then list 3)

My current HTML and CSS is:

<div class="sidebar_content">
   <div class="list_one_container">
      <LIST class="list_1" />
   </div>
   <div class="list_one_and_two_container">
      <LIST class="list_1" />
      <LIST class="list_1" />
   </div>
</div

.sidebar_content {
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
}

.list_one_container {
   display: flex;
   flex-direction: column;
   max-height: 50%;
}

.list_one_and_two_container {
   display: flex;
   flex-direction: column;
   flex: 1 1;
}

.list_1 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
}

.list_2 {
   display: flex;
   flex-direction: column;
   flex: 0 1 auto;
   overflow-y: auto;
}

.list_3 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   max-height: 50%
}

This works for point 1, but it doesn't scale as I said in point 2. I can't find a working solution. Is there a way to do it in CSS or do I have to write it in typescript for this?

Thanks!