CSS grid scrollable column

Question

I have two grid columns. The content in the first column container-column should be scrollable and it's height should be given by the second column container-detail height.

How to acomplish this in CSS grid?

<div class="container">
  <div class="container-column">
    <div class="container-filter">
      FILTER PANEL
    </div>
    <div class="container-items">
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
      <div>ITEM</div>
    ...
    </div>
  </div>
  <div class="container-detail">
    <div>DETAIL CARD FORM</div>
    <div>DETAIL CARD FORM</div>
    ...  
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  
  .container-detail {
    grid-column: 2/-1;
    background-color: green;
    min-height: 0; // TODO Don't expand this column
  }

  .container-column {
      grid-column: 1;

    .container-filter {
      background-color: red;
    }

    .container-items {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      max-height: 100vh; // TODO The height should be the same as the `container-detail` column
    }
  }
}

Here is a JSFiddle demo: https://jsfiddle.net/sand6/vfaucmnx/16/