Can I set a max-height (%) for a flexbox using as value the current height of a certain flexbox item? (CSS only)

Question

I know how to go around this using js. But I would prefer a CSS only solution, if there is any.

I have 2 items in a flexbox. The first one (item1) is using all available space and the other (item2) has a fixed width of 400px.

Item1 is using an aspect ration 16:9 to be responsive and consistent across all browser widths. Item2 contains a list of items. The total height in most cases will be bigger than Item1 height. So I want to apply inner scroll to Item2. I want Item1 and Item2 to always have the same height. The height should be decided by Item1.

I think I should use max-height to the flexbox container, apply overflow:hidden to Item2 and oveflow-y:auto the Content of Item2.

But what should be the value of max-height?

A rough draft of the code is here:

<div class="flex">
  <div class="item1">
    <div class="content">
      ... content with aspect ratio 16:9 ...
    </div>
  </div>
  <div class="item2 overflow-hidden">
    <div class="content overflow-y-auto">
       <ul>
         <li>
          ...long list of items..
         </li>
    </div>
  </div>
</div>

.flex {
 display: flex;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}

enter image description here