CSS Grid cell expands

HTML

<div class="container">
  <div class="gallery">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <h2>Some Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS

* {
  margin: 0;
}

.container {
  background-color: aqua;
  display: grid;
  padding: 1rem;
  grid-template-columns: 1fr min-content; /* I want to avoid setting min-content to a fixed width here */
  grid-template-rows: repeat(2, min-content);
  grid-template-areas:
      'title gallery'
      'description gallery';
  grid-gap: 1rem;
}

.gallery {
  grid-area: gallery;
  display: grid;
  grid-template-columns: 8rem 8rem;
  grid-auto-rows: 8rem;
  grid-gap: 1rem;
  overflow-y: auto; /* How do I have this overflow, depending on the cumulative min-content of the left column */
}

.gallery > * {
  background-color: magenta;
}

h2 {
  grid-area: title;
  background-color: white;
}

p {
  grid-area: description;
  background-color: lightgrey;
}