Hyper Khaa Posts - Answer Overflow

Hyper Khaa

•Created by Hyper Khaa on 1/25/2025 in #front-end

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

1 replies

KPCKevin Powell - Community

•Created by Hyper Khaa on 7/11/2024 in #front-end

<div> spanning 2 sections with different backgrounds and container set in each.

8 replies

KPCKevin Powell - Community

•Created by Hyper Khaa on 6/24/2024 in #front-end

Container with image bleeding out while text stays in.

18 replies

KPCKevin Powell - Community

•Created by Hyper Khaa on 9/27/2022 in #front-end

A little help with the image in this challenge

6 replies

Gaming

Programming