0

I have a layout with CSS Grid that contains several rows. The grid can contain a variable number of children. The row height is set to

grid-auto-rows: minmax(250px, min-content);

The items in the grid can have variable intrinsic heights. Is there any way to let some grid items expand the height of the row for all items on the same row, whilst ensuring that other items just stick to whatever the height of the row is and scroll if necessary to display all of that grid item's children?

Codepen link

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(250px, -webkit-min-content);
  grid-auto-rows: minmax(250px, min-content);
  gap: 10px;
}

.item {
  background-color: #7fffd4;
}

.expand-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expand-item {
  min-height: 20px;
  background-color: #a9a9a9;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-shrink: 1;
}

.scroll-container.fixed-height {
  max-height: calc(15 * 20px + 14 * 10px);
}

.scroll-item {
  min-height: 20px;
  background-color: #add8e6;
}

h1,
h2,
p {
  font-family: sans-serif;
}

h2,
p {
  margin: 15px 15px 0;
}

code {
  font-size: 1rem;
  background-color: #d3d3d3;
  color: #2f4f4f;
  border-radius: 2px;
  padding: 2px;
  line-height: 1;
}
<h1>The grid</h1>
<div class="container">
  <div class="item">
    <p>This row's items are all at the minimum height of <code>250px</code></p>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item">
    <h2>Intended behaviour</h2>
    <p>This row shows the desired behaviour. The row expands to fit the contents of column 2. And the contents in column 3 scroll to fit whatever the height of the row is. But column 3's contents do not expand the row height. </p>
    <p>Instead the container in column 2 adds a scrollbar if necessary.</p>
    <p>The way this example does this is by hardcoding the number of items in column 2 and fixing the height of the item in column 3 to match the height of the item in column 2.</p>
  </div>
  <div class="item expand-container">
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
  </div>
  <div class="item scroll-container fixed-height">
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
  </div>
  <div class="item">
    <h2>Actual behaviour</h2>
    <p>But this shows what happens by default. Even though the container in column 3 has an <code>overflow-y</code> set to <code>auto</code> and the maximum row height is set to <code>min-content</code> the container still prefers to expand over adding a
      scrollbar.
    </p>
  </div>
  <div class="item expand-container">
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
    <div class="expand-item"></div>
  </div>
  <div class="item scroll-container">
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
    <div class="scroll-item"></div>
  </div>
</div>
Aron
  • 8,696
  • 6
  • 33
  • 59

0 Answers0