Css 当内容不相等时，Flexbox布局中断

我已经构建了一个工作的三列flexbox布局，其中包含卡片，我现在介绍了它

我的结构如下：

<div class="events-row">
  <div class="card">
    <div class="card-flip">
      <div class="front">
        <div class="card-img four-three-img">
          <a href="#"><img src="http://i.imgur.com/gsnJi.jpg" /></a>
        </div>
        <div class="card-info">
          <h2>Event title</h2>
          <h3>Event date</h3>
          <h3>Event venue</h3>
          <p>
            Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
          </p>
          <div class="button-cont">
            <div class="button purple-button" href="#">Buy Tickets</div>
          </div>
        </div>
      </div>
      <div class="back">
        <div class="card-img four-three-img">
          <a href="#"><img src="http://i.imgur.com/gsnJi.jpg" /></a>
        </div>
        <div class="card-info">
          <h2>Event title</h2>
          <h3>Event date</h3>
          <h3>Event venue</h3>
          <p>
            Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
          </p>
          <div class="button-cont">
            <div class="button purple-button" href="#">Buy Tickets</div>
          </div>
        </div>
      </div>
     </div>
  </div>
</div>

问题是，如果

.back

的内容累积到小于

.front

的高度，则

.card

元素的高度将收缩以匹配

.back

。如果

.back

和

.front

的内容相等，或者根本没有

.back

（请参见工作布局演示），则布局不会中断

基本上，

.card

的高度基于

.back

的内容，但我希望它基于

.front

的内容

我曾经使用过flexbox CSS，但我不知道是什么导致了这种情况。任何帮助都将不胜感激

演示（查看

.card

以查看不同的效果）：

• 破损布局：
• 工作布局：

.events-row {
  display: flex;
  justify-content: space-between;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
  background-color: grey;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-row .card .card-info {
  padding: 15px;
  text-align: left;
  font-size: 1rem;
  color: white;
}