Have divs same height with flex

Question

I have a have blocks that I would like to be inline and then have the same height no matter how much text is going to be in the boxes. The amount of text could vary at any point. I have the blocks inline but the height I can not figure out how to have the same height for all of them.

HTML:

<div class="article_block">
   <div class="article_block_content">
       <div class="article_block_content_left">
          <img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
        </div>

        <div class="article_block_content_right">
          <h5 class="article-tag"><%= category.name %></h5>
          <h2 class="article-title"><%= headline %></h2>
          <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
        </div>
    </div>
</div>

CSS:

.article_block {
    width: 33%;
    display: inline-flex;

    .article_block_content{
      margin: 10px;
      height: inherit;

      .article_block_content_left {

      }
      .article_block_content_right {
        padding: 20px;

        .article-tag {
          text-align: center;
          color: #7d8a8f;
          text-transform: capitalize;
          font-size: 14px;
          font-family: 'Open Sans';
          padding-top: 15px;
        }
        .article-title {
          text-align: center;
          font-family: 'Merriweather';
          color: #333;
        }
        .article-subtitle {
          text-align: center;
          font-family: 'Merriweather';
          font-style: italic;
          color: #464849
        }
      }
    }
  }

This is currently what is happening

Answer 1

Set display: flex on the parent of your .article-block divs. This will keep the three .article-block divs to be the same height (because align-items default is stretch).

* { box-sizing: border-box; }

.article-block-wrap {
  display: flex;
  margin: 0 -10px;
}

.article_block {
    padding: 5px;
    display: flex;
    flex: 0 0 33.333%;
    overflow: hidden;
}

.article_block_content{
    background: rgba(0,0,0,0.2);
}

.article_block_content_left {
    text-align: center;
}

.article_block_content_right {
  padding: 20px;
}

.article-tag {
  text-align: center;
  color: #7d8a8f;
  text-transform: capitalize;
  font-size: 14px;
  font-family: 'Open Sans';
  padding-top: 15px;
}

.article-title {
  text-align: center;
  font-family: 'Merriweather';
  color: #333;
}

.article-subtitle {
  text-align: center;
  font-family: 'Merriweather';
  font-style: italic;
  color: #464849
}

<div class="article-block-wrap">

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/275"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a long headline</h2>
            <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
          </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/300"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a much longer headline than either the first or third block</h2>
            <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
          </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/250"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a slightly longer headline</h2>
            <h4 class="article-subtitle">
              This is the future home of the article headline. I hope this makes you want to read the article.
              This is the future home of the article headline. I hope this makes you want to read the article.
            </h4>
          </div>
      </div>
  </div>
     
</div><!-- .article-block-wrap -->