Flex box inner item with equal heights

Question

Just wondering how to have the title (dark red section) the same height in all columns with flexbox? The title needs to be as tall as the tallest title in the group.

So in this example below, the Event 2 & Event 3 header needs to be the same height as the "Really long event title" header.

The markup looks like this

<div class="event">
   <div class="event__header">
     <h1>Event Title</h1>
   </div>
   <div class="event__content">
     ...
   </div>
</div>

Thanks in advance

You could probably find height of the tallest using inspect, and inject a style of `min-height` to your title elements — Shobhit Srivastava, Dec 22 '16 at 05:13
You can do it with Zurb Foundation XY Grid: https://codepen.io/iamrobert/pen/eyeyBB — iamrobert, Jan 07 '18 at 07:04

ab29007 · Answer 1 · 2016-12-22T05:35:19.350

Flexbox is not an option, because they are in different div. If you are using jQuery then you can achieve this with following snippet.

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
});

Here is a live example:

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
})

*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:200px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>

Hmm, yeah not really looking to use jQuery in this instance. I didn't think it was possible, but thought I'd put the question to the community just incase someone has done this before. Thanks anyway! — Joshua Russell, Dec 22 '16 at 05:53

score 0 · Accepted Answer · answered Dec 22 '16 at 05:25

0

You need to give the min height for event_header in

.event__header{min-height:100px}

answered Dec 22 '16 at 05:25

Bhupinder kumar

558
1
5
19

Yep, min height is unfortunately the way to go without javascript. – Joshua Russell Dec 22 '16 at 05:53
Setting a min-height doesn't provide a dynamic or responsive solution as content is variable and words breakdown on tablet and mobile. – Steven Grimaldo Jul 14 '21 at 00:40

Yathi · Answer 3 · 2016-12-22T06:10:35.120

0

You can achieve this with flex box if you can wrap all the divs with the title into a parent div. If that is possible, setting the display of the parent div to flex should do it for you.

.parent {
  display:flex;
}

This may help: https://jsfiddle.net/75xoj1so/

edited Dec 22 '16 at 06:10

answered Dec 22 '16 at 06:02

Yathi

1,011
1
12
21

score -1 · Answer 4 · answered Dec 22 '16 at 06:09

*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:150px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
  min-height:100px
}

<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>

Flex box inner item with equal heights

4 Answers4

You need to give the min height for event_header in