How to set height of all elements same to height of max element

Question

I have column content, with elements having different heights. How do I set the height of all of those elements to the same the heightest of all elements?

what i have:

.content {
  border: 1px solid black
}

<div class="container">
  <div class="content">content1</div>
  <div class="content">content2<br>content2</div>
  <div class="content">content3</div>
</div>

how do I set each content height the same as the max height of content?

preferably without javascript

score 1 · Accepted Answer · answered Jun 11 '23 at 11:50

The easiest way is to create a 1-column grid and use grid-auto-rows: 1fr. That will size all rows to the largest row:

.container {
  display: grid;
  grid-auto-rows: 1fr;
}

/* for visualization purposes only */
.content {
  border: 2px dashed red;
}

<div class="container">
  <div class="content">content1</div>
  <div class="content">content2<br>content2</div>
  <div class="content">content3</div>
</div>

How to set height of all elements same to height of max element

1 Answers1