我已经构建了一个包含卡的工作三列flexbox布局，我现在已经介绍了{em>卡。
以下是我的结构：
<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>
CSS：
.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;
}
问题在于，如果.back的内容累积到小于.front的高度，则.card元素的高度会缩小以匹配{{ 1}}。如果.back和.back的内容相同，或者根本没有.front（请参阅工作布局演示），则布局不会中断。< / p>
基本上，.back高度取决于.card的内容，但我希望它基于.back的内容。
我已经使用过flexbox CSS，但我无法弄清楚导致这种情况的原因。任何帮助将非常感谢！
演示（检查.front以查看不同的效果）：