0

Is there a way to make elements the same height.

I know I can use techniques like this: https://css-tricks.com/fluid-width-equal-height-columns/ to make equal height columns. Which is great, and In should utilise that in my solution too. However, I'd also like to make the titles in each block the same height and I cannot use this technique.

Here's an example:

.flex-container-row {
display: flex;
flex-direction: row;
}
.flex-item-column{
   flex-basis: 33%;
}
<div class="flex-container-row">
  <div class="flex-item-column">
    <h2>Title: All titles should be the same height</h2>
    <p>this is some body text.</p>
  </div>
  <div class="flex-item-column">
    <h2>This is a shorter title</h2>
    <p>this is somebody elses text.</p>
  </div>  
  <div class="flex-item-column">
    <h2>This is an even more longerer title, perhaps even the longerist of all the titles</h2>
    <p>this is somebody's text.</p>
  </div>    
</div>

What would be the best way to achieve the same height titles. I know I can use min-height but assuming the titles are dynamic.

Eoin
  • 1,413
  • 2
  • 17
  • 32
  • Use grid : .flex-container-row {display: grid;grid-template-columns: repeat(3, 1fr);} .flex-item-column{background: lightgrey;} https://codepen.io/dmegatool/pen/dyymxeK – dmegatool Nov 06 '19 at 16:26
  • Thanks @dmegatool but... your titles are not the same height. – Eoin Nov 06 '19 at 18:52
  • 1
    Sorry, I misread. I thought it was the whole block. So if we're talking about the H2, there's just no way. Css is not aware of parents, let alone children of sibling parents. You would need to change the html so titles are a row and content is the second row... Or use javascript. – dmegatool Nov 07 '19 at 01:07
  • 1
    Using said 2 rows : https://codepen.io/dmegatool/pen/bGGMBdV – dmegatool Nov 07 '19 at 01:25

0 Answers0