Unable to achieve automatic equal height with Flexbox

Question

I've created a three-column layout, but despite using display: flex on the container, the children are not automatically getting the same height. I'm not a Flexbox expert, so I'm struggling to identify the issue.

Here is my code:

.events-row {
  display: flex;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

Demo: http://codepen.io/ourcore/pen/gLKeLV.

They're the same height for me in chrome. That is, if you don't include .button-cont underneath the first column. — sol, Dec 08 '16 at 16:54
With the exception of the buy tickets bit at the bottom and the hovering, it all looks good to me, can you be more specific? — Brad, Dec 08 '16 at 16:54
Well, without the button, it would be the same height whether I used Flexbox or not because the content would be the same. I'm trying to achieve the same height regardless of the content. So, I'd like to include the button. — Mario Parra, Dec 08 '16 at 16:55
@MarioParra Check out my answer. They are of same height. Put the background to the `.event-card { background: #eaeaea; }`. That fixes. — Praveen Kumar Purushothaman, Dec 08 '16 at 16:57

Praveen Kumar Purushothaman · Accepted Answer · 2016-12-08T16:58:23.263

They are of equal heights. When you add a border:

border: 1px solid #ccc;

They look the same height. Just that you need to add the background to the parent, which is the .event-card.

Alternate solution being adding the background to the .event-card:

.events-row .event-card {
  background: #eaeaea;
}

.events-row {
  display: flex;
}
.events-row .event-card {
  border: 1px solid #ccc;
  background: #eaeaea;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#">
        <img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" />
      </a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

Note: Use the full screen and check.

CodePen: http://codepen.io/anon/pen/JbZLya

That makes sense. Thank you! – Mario Parra Dec 08 '16 at 16:58 — Mario Parra, Dec 08 '16 at 16:58

score 1 · Answer 2 · answered Dec 08 '16 at 16:54

Give background-color to .event-card, like:

.event-card {
  background: #eaeaea;
}

Have a look at updated Codepen the snippet below (use full screen):

.events-row {
  display: flex;
}
.events-row .event-card {
  background: #eaeaea;
}
.events-row .event-card:hover {
  margin-top: -5px;
}
.events-row .event-card .event-card-img {
  position: relative;
}
.events-row .event-card .event-card-img:hover {
  opacity: 0.5;
}
.events-row .event-card .event-card-img img {
  display: block;
  width: 100%;
}
.events-row .event-card .event-card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  font-size: 1.5em;
  color: #fff;
  background: #666;
}
.events-row .event-card .event-card-info {
  padding: 15px;
  text-align: left;
  color: #666;
  background: #eaeaea;
}
.events-row .event-card .event-card-info h1 {
  font-size: 2.5em;
  color: #000;
}
.events-row .event-card .event-card-info h2 {
  font-size: 2em;
  line-height: 1.5;
}
.events-row .event-card .event-card-info p {
  padding: 15px 0;
  font-size: 1.75em;
}
.events-row .event-card .event-card-info p a {
  font-size: 1.1em;
}
.events-row .event-card .event-card-info .button-cont {
  text-align: center;
}
.events-row .event-card .event-card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1.8em;
}

<div class="events-row">
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="event-card">
    <div class="event-card-img">
      <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=36&txt=Event%20Photo&w=382&h=275" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="event-card-info">
      <h1>Event title</h1>
      <h2>Event date</h2>
      <h2>Event venue</h2>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>

Hope this helps!

score 1 · Answer 3 · edited May 23 '17 at 12:13

There are two concepts you need to keep in mind when revising your code:

The flex equal height column feature applies only to siblings
The scope of flex layout is limited to the parent-child relationship

You made a top-level container (.events-row) a flex container. That means that only the child (.event-card) accepts flex properties (and these children are, in fact, equal height siblings).

But you want descendants further down the tree to share equal height. Unless you give their parent container display: flex or display: inline-flex, or maybe use height: 100%, they will not have equal height.

Here are more in-depth explanations:

Unable to achieve automatic equal height with Flexbox

3 Answers3