引导堆叠卡

Question

我有一个flexbox列，其中包含三个bootstrap 4卡。当我调整容器大小时，第一个容器会因其响应式设计而变高或变短。我想要的是保持整个容器的高度恒定，并缩小和扩大中间卡。这是我的代码： HTML

<div >
        <div class="cards">

            <div class="card">
               <div class="row">
                 <div class="col-md-6">
                   1234
                 </div>
                 <div class="col-md-6">
                   5678
                 </div>
               </div>
            </div><!-- /card-one -->

        <div class="card">
               <p>content for card two</p>
        </div><!-- /card-two -->

        <div class="card">
              <p>content for card three</p>
        </div><!-- /card-three -->
</div>

CSS：

.cards {
display: flex;
flex-flow: column;
justify-content: space-between;
}

提琴： Sample

谢谢