CSS Grid: Make certain children define the container height and force others shrink to it

Question

I have prepared a Codepen here: https://codepen.io/mauricedoepke/pen/rNyLWmZ

I want the container of the grid grow to the height of the sum of the gray boxes. The height of the gray boxes is defined by its content.

I Also want the red box to be constrained by the height of the container (that is defined by the gray boxed). In my example I did it by giving the red box a fixed height, which I don't want, to not interfere with the gray boxes. If I don't give the red box a fixed height, it makes the container grow and with it the gray boxes which I want to prevent.

Is there any pure css solution to solve this problem?

.container {
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 0.5rem
}

.element {
  background-color: gray;
  padding: 6px;
}

.sidebar {
  background-color: red;
  grid-row: span 4 / span 4;
  grid-column: span 1 / span 1;
  padding: 6px;
  
  min-height: 0;
  overflow-y: auto;
  /*
    I want it too look like if the red blocks height is constrained
    Without specifying the height as it might change.
  */
  height: 294px;
}

<div class="container">
  <div class="element">
    Some content of random varying length. Some content of random varying length. Some content of random varying length. Some content of random varying length. Some content of random varying length.
  </div>
  <div class="element">Some content of random varying length.</div>
  <div class="sidebar">
    Some content of random varying length that can outgrow the gray boxes but should not stretch the grid. Instead it should scroll, if growing larger in height, than the gray boxes left to it. Some content of random varying length that can outgrow the gray
    boxes but should not stretch the grid. Instead it should scroll, if growing larger in height, than the gray boxes left to it. Some content of random varying length that can outgrow the gray boxes but should not stretch the grid. Instead it should
    scroll, if growing larger in height, than the gray boxes left to it. Some content of random varying length that can outgrow the gray boxes but should not stretch the grid. Instead it should scroll, if growing larger in height, than the gray boxes
    left to it. Some content of random varying length that can outgrow the gray boxes but should not stretch the grid. Instead it should scroll, if growing larger in height, than the gray boxes left to it. Some more Content. Some more Content. Some more
    Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more
    Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more Content. Some more
    Content. Some more Content.
  </div>
  <div class="element">Some content of random varying length.</div>
  <div class="element">Some content of random varying length.</div>
  <div class="element">Some content of random varying length.</div>
  <div class="element">Some content of random varying length.</div>
  <div class="element">Some content of random varying length.</div>
  <div class="element">
    Some content of random varying length. Some content of random varying length. Some content of random varying length. Some content of random varying length. Some content of random varying length. Some content of random varying length.
  </div>
</div>