Flex columns equal header and content height

Question

I made a row with columns in it, these columns need to have the same height. Inside these columns are a header and a main-content, the content in both these elements can vary, but I want the header to have the same height in all the columns. So the columns need to be the same height, but the header in these columns also need the same height.

Heres an example of the html:

.row{
    display: flex;
}

.column{
    display: flex;
    flex-direction: column;
}

.header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-content{
    flex: 1 0 auto;
}

.main-content{
    flex: 1 0 auto;
    width: 100%;
    float: left;
}

<ul class="row">
    <li class="column">
        <div class="header">
            <div class="header-content">
                <h2>Lorem ipsum dolor sit amet consectetur</h2>
                <p>Toloribus, dolorem animi quo ea?</p>
            </div>

            <a href="#" class="button">Read more</a>
        </div>
        <div class="main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
        </div>
    </li>
    <li class="column">
        <div class="header">
            <div class="header-content">
                <h2>Lorem ipsum dolor sit.</h2>
                <p>Tenetur odio minus, quas natus.</p>
            </div>

            <a href="#" class="button">Read more</a>
        </div>
        <div class="main-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
        </div>
    </li>
</ul>

Answer 1

Flexbox cannot equalise heights between elements that do not share a parent (in fact no CSS layout method can). Since your headers do not, flexbox cannot help. You will need javascript (or a JS Library).

JQuery Sample Function

$(document).ready(function(){

    var highestBox = 0;
        $('.row .header').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
   $('.row .header').height(highestBox);

});

$(document).ready(function() {

  var highestBox = 0;
  $('.row .header').each(function() {
    if ($(this).height() > highestBox) {
      highestBox = $(this).height();
    }
  });
  $('.row .header').height(highestBox);

});

.row {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:#c0ffee;
}
.header-content {
  flex: 1 0 auto;
}
.main-content {
  flex: 1 0 auto;
  width: 100%;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row">
  <li class="column">
    <div class="header">
      <div class="header-content">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Toloribus, dolorem animi quo ea?</p>
      </div>

      <a href="#" class="button">Read more</a>
    </div>
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos. Beatae vero quas praesentium amet quos nemo, earum fugit.</p>
    </div>
  </li>
  <li class="column">
    <div class="header">
      <div class="header-content">
        <h2>Lorem ipsum dolor sit.</h2>
        <p>Tenetur odio minus, quas natus.</p>
      </div>

      <a href="#" class="button">Read more</a>
    </div>
    <div class="main-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi illum odio officiis optio quo esse, itaque ipsa velit, perspiciatis atque dignissimos.</p>
    </div>
  </li>
</ul>