使用flex有div相同的高度

Question

我有一个我想要内联的块，然后无论盒子里有多少文本都有相同的高度。文本的数量可能随时变化。我有块内联，但高度我无法弄清楚如何为所有这些高度。

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
        }
      }
    }
  }

目前正在发生这种情况

Answer 1

在<select id= "my_id" name="my_name" size="1" class="my_class"> @foreach($items as $item) @if($selected_item->item_id == $item->id) <option selected value="{{$item->id}}">{{$item->name}}</option> @else <option value="{{$item->id}}">{{$item->name}}</option> @endif @endforeach </select> div的父上设置display: flex。这会使三个.article-block div保持相同的高度（因为.article-block默认值为align-items）。

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
}