1

Is it possible to configure a CSS grid so the max height of the columns is the height of the smallest column?

For example:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.grid > div {
  border: 1px solid red;
  padding: 15px;
}

p {
  margin: 0;
  padding: 0;
  overflow: auto;
}
<div class="grid">
  <div>
    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

I would like the left column to have the height of the right column (and have a scroll overflow). I tried with different configurations of grid-auto-rows but to no avail. I don't want to set fixed heights.

Arkellys
  • 5,562
  • 2
  • 16
  • 40
  • Not possible with grid to my understanding. Grid is very explicit and doesn't listen to its children like flexbox does – Zach Jensz Apr 23 '23 at 06:28
  • You could try: for the left div `height:0;min-height :100%;overflow :auto ;` it will take the height of the right div. – G-Cyrillus Apr 23 '23 at 07:07
  • The duplicates have the same problem that I had - i.e. assuming one knows which column is the one to set the height. If you don't know then in this case you'll have to use JS say to find the smallest in height, then you can set others to be absolute etc. – A Haworth Apr 24 '23 at 16:19
  • @AHaworth Yep, that's why I consider that the duplicates don't answer my question. It's just not possible (yet) to do it with CSS Grid properties so it works in all cases. – Arkellys Apr 24 '23 at 16:39

1 Answers1

-1

Using script, you can determine which is the longer column and then style its height to match height of the other one.

document.querySelectorAll('.grid').forEach(g => {
  const cols = Array.from(g.children)
  const shortest = cols.reduce(function(prev, current) {
    return (prev.scrollHeight < current.scrollHeight) ? prev : current
  })
  cols.forEach(c => {
    if (c !== shortest) c.style.height = shortest.scrollHeight + 'px'
  })  
})
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  align-items: start; /* prevent the smallest column stretching */
  margin-bottom: 3em;
}

.grid.c3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid > div {
  border: 1px solid red;
  padding: 15px;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

p {
  overflow: auto;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}
<div class="grid">
  <div>
    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</div>

<div class="grid c3">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>

  <div>
    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <div>
    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51