How can I make all my grid column have their height be equal to the height of shortest column

Question

As you can see in my snippet, both columns are getting their heights set to the height of the tallest column. I however want my columns to have their heights set to the shortest column, where the second column would have overflow scroll instead.

I do not know the height of either of the columns as their content is loaded in dynamically.

I also do not need to use grid if flex can acheive my desired result.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.item1 {
  background-color: #00ffff;
}
.item2 {
  background-color: #ff00ff;
  overflow-y: auto;
}

<div class='grid'>
  <div class='item1'>
    <div class='item1_content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
  <div class='item2'>
    <div class='item2_content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

Not something CSS can do by itself. What would set the height limit that would trigger the overflow on the taller box? There's nothing. Need a script. — Michael Benjamin, Mar 09 '23 at 17:33
Do you know which one will be the shortest? If yes, there is a CSS solution — Temani Afif, Mar 10 '23 at 07:55
@TemaniAfif Yes, the right one will always be shortest in my case — Oscar R, Mar 10 '23 at 20:09

score 2 · Accepted Answer · answered Mar 09 '23 at 16:39

You could use javascript for this. I think there isn't a CSS only solution for this :)

let referenceBox = document.getElementsByClassName("item1_content")[0];
let adjustedBox = document.getElementsByClassName("item2_content")[0];

adjustedBox.style.height = referenceBox.offsetHeight + 'px';

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.item1 {
  background-color: #00ffff;
}
.item2 {
  background-color: #ff00ff;
  overflow-y: auto;
}

<div class='grid'>
  <div class='item1'>
    <div class='item1_content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
  <div class='item2'>
    <div class='item2_content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

How can I make all my grid column have their height be equal to the height of shortest column

1 Answers1