Prevent CSS Grid cell from vertically expanding cells in other column

Question

I think images describe the problem better than words here:

What I want to achieve

What I have

As you can see the title and description get expanded equally to create room for the gallery. I am trying to achieve the first image, where the gallery overflows and creates a scrollbar in favor for the minimum content in the left column.

* {
  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;
}

<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>

JSFiddle

One dirty solution

I managed to get this problem sort of solved using absolute positioning but it requires knowing the width the gallery would take up.

* {
  margin: 0;
}

.container {
  background-color: aqua;
  display: grid;
  padding: 1rem;
  grid-template-columns: 1fr 18rem; /* Create room for the gallery */
  grid-template-rows: repeat(2, min-content);
  grid-template-areas:
      'title gallery'
      'description gallery';
  grid-gap: 1rem;
  position: relative /* Create context for absolute positioning later */
}

.gallery {
  grid-area: gallery;
  display: grid;
  grid-template-columns: 8rem 8rem;
  grid-auto-rows: 8rem;
  grid-gap: 1rem;
  overflow-y: auto;
  position: absolute; /* Remove gallery from flow */
  top: 0; /* Align with container borders */
  right: 0;
  bottom: 0;
}

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

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

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

<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>

JS Fiddle

So. Is there a way I can get desired result without a fixed width for the gallery? (And without javascript). I haven't tried using flexbox yet because my ideal goal is to make this work without creating a bunch of wrappers for maximum possible responsiveness, however if it's not possible with pure CSS grid I happily fallback to flexbox.

Answer 1

a possibility would be to play with height and min-height , then add some right padding to avoid the horizontal scrollbar or use overflow-x:hidden

* {
  margin: 0;
}

.container {
  background-color: aqua;
  display: grid;
  padding: 1rem;
  padding-right: 0.2rem;
  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 */
  height: 0;
  min-height: 100%;
  box-sizing: content-box;/* if that is needed aside other styling you might have */
  padding-right: 1.2rem;/* or overflow-x:hidden;*/
}

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

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

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

<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>

height:0;min-height:100% for .gallery is your key, then how to manage paddings and scrollbar is up to you.

Answer 2

If you set grid-auto-rows: min(8rem, 100%); on gallery, it should do the trick.