KPC
Kevin Powell - Community•2mo ago
Hyper Khaa

Set height of two column grid container to the height of the small column

I have a grid container which has 2 columns with different content inside. I want both the columns to be of equal height but that height should be the height of the smaller column and not the bigger column. The bigger column will have scroll bar so we can scroll to view the content of it. A simple demo is as below: 
<div class="grid">
  <div class="short">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, illo eum natus sapiente, ipsa expedita necessitatibus,.</p>
  </div>

  <div class="long">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ratione neque similique aperiam aut ut officiis. Repellendus, optio. Dolorum eaque corporis natus. Praesentium reiciendis, tenetur incidunt deserunt obcaecati accusamus sunt?</p>
    <p>Velit, recusandae nesciunt? Minus accusantium placeat illum magnam, est neque doloribus possimus iure deserunt ipsa ab. Atque placeat hic ab sequi ratione omnis est laudantium, ea aut quaerat. Quasi, fuga.</p>
  </div>
</div>
<div class="grid">
  <div class="short">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, illo eum natus sapiente, ipsa expedita necessitatibus,.</p>
  </div>

  <div class="long">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ratione neque similique aperiam aut ut officiis. Repellendus, optio. Dolorum eaque corporis natus. Praesentium reiciendis, tenetur incidunt deserunt obcaecati accusamus sunt?</p>
    <p>Velit, recusandae nesciunt? Minus accusantium placeat illum magnam, est neque doloribus possimus iure deserunt ipsa ab. Atque placeat hic ab sequi ratione omnis est laudantium, ea aut quaerat. Quasi, fuga.</p>
  </div>
</div>
* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: min-content;
}

.short {
  border: 4px dotted red;
}

.long {
  border: 4px solid blue;
  overflow: auto;
}
* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: min-content;
}

.short {
  border: 4px dotted red;
}

.long {
  border: 4px solid blue;
  overflow: auto;
}
I tried setting height: min-content to the grid container but it is not working. I found a solution while writing this question which is https://stackoverflow.com/a/29629924/29315733. But this solution feels more like a hack rather than proper solution 😅. A little help here would be much appreciated 😊.
Stack Overflow
How to set height of two columns to the height of the smaller one
I have two columns, as illustrated by this pen. I'm looking for a CSS-only solution (flexbox allowed, obviously) to set the height of the left column to the height of the right column (which is the
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?