如何让Flex元素垂直重叠，实现纸牌堆叠效果

需要实现类似接龙纸牌的垂直堆叠效果——底部卡片完全显示，上方每张卡片只露出一小部分。我之前参考方法实现了水平堆叠，效果正常，但转换为垂直堆叠时遇到了问题。

可行的水平堆叠代码 #

.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  /*overflow: hidden;*/  /*using width shows better overlap*/
  min-width: 3.5em;
}

.cardWrapper:last-child, .cardWrapper:hover {
    /*overflow: visible;*/ 
    min-width: 10.5em; /*full width + 2*padding */
}

.card {
    width: 10em;
    min-width: 10em;
    height: 6em;
    border-radius: 0.5em;
    border: solid #666 1px;
    background-color: #ccc;
    padding: 0.25em;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="cards">
  <div class="cardWrapper">
    <div class="card">card 1 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 2 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 3 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 4 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 5 blah blah blah</div>
  </div>
</div>

垂直堆叠的尝试问题 #

我尝试将flex主轴改为垂直方向，设置了flex-direction: column，但未达到预期效果：

• 预期结果：整齐的垂直堆叠
• 实际结果：卡片以全高排列成一列

还尝试过其他方法，均无效：

• 给.cardWrapper添加display: flex; flex-direction: column; justify-content: center; align-items: center;，仅将列移至屏幕中央，无堆叠效果
• 将.card的flex-direction改回默认row，无明显变化

尝试的垂直堆叠代码如下：

.cards {
  display: flex;
  flex-direction: column; /*change main axis to vertical, but now no stacking*/
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  /*overflow: hidden;*/  /*using width shows better overlap*/
  min-height: 2em;
}

.cardWrapper:last-child, .cardWrapper:hover {
    /*overflow: visible;*/ 
    min-height: 6.5em; /* full height + 2*padding*/
}

.card {
    width: 10em;
    min-width: 10em;
    height: 6em;
    border-radius: 0.5em;
    border: solid #666 1px;
    background-color: #ccc;
    padding: 0.25em;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="cards">
  <div class="cardWrapper">
    <div class="card">card 1 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 2 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 3 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 4 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 5 blah blah blah</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者IRequireAssistance