嵌套的Flex容器不会随填充而增长

Question

我已经使用Flexbox构建了一个行布局，并且在每一行（.card）内，有三列，其中最后一列（.card-links）也是一个Flex容器。当这三列在移动设备上堆叠成行时，最后一列不会随着内容+填充而增长，其高度仅其填充。

我找到了两种解决方法，我可以将其设置为边距，或者在移动设备上将其显示为block，但我真的很想继续使用填充，因为我在其他地方也是如此，并理解为什么这样做正在发生。

HTML结构：

<div class="card">
 <div class="card-img four-three-img">
  <a href=""><img src="" alt=""></a>
 </div>
 <div class="card-info">
  <div class="event-headings">
   <a href=""><h1>Heading</h1></a>
   <a href=""><h2>Subheading</h2></a>
  </div>
  <p>
  </p>
  <p>Text</p>
 </div>
 <div class="card-links">
  <div class="button-cont">
   <a class="pass-button button" href="" target="_blank" role="button">Button Text</a>
  </div>
 </div>
</div>

相关CSS：

.card {
  display: flex;
  flex-direction: column;
}

.card-img,
.card-info,
.card-links {
  flex-basis: 33.3%;
  position: relative;
  padding: 15px;
}

.card-info {
  flex-basis: 40%;
}

.card-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 26.7%
}

@media screen and (max-width: 768px) {
  .card-links {
    padding: 15px 15px 45px;
  }
}