Nested Flex container not growing with padding - css

Question

I've built a row layout with Flexbox and within each row (.card), there are three columns, the last (.card-links) of which is also a Flex container. When these three columns stack as rows on mobile, the last doesn't grow with its content + padding and its height is only its padding.
I've found two workarounds where I can set it as margin instead, or display it as a block on mobile, but I'd really like to keep using padding as I have everywhere else and understand why this is happening.
HTML structure:
<div class="card">
<div class="card-img four-three-img">
<img src="" alt="">
</div>
<div class="card-info">
<div class="event-headings">
<h1>Heading</h1>
<h2>Subheading</h2>
</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>
Relevant 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;
}
}