I'm using flexbox to build the following layout of cards
.card {
flex-basis: calc(100% - 40px);
border-radius: 4px;
}
.card__content {
padding: 25px;
}
.card__footer {
display: flex;
justify-content: space-between;
padding: 10px 25px;
}
I'm trying to achieve that the card__footer is always aligned to the bottom. When I try by adding the following code, I lose my stretch and the items are not the same height anymore
.card {margin-bottom: auto;}
Any idea in what direction I have to look for a solution?
.card {
flex-basis: calc(100% - 40px);
border-radius: 4px;
border: 1px solid #888;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card_content {
padding: 25px;
}
.card_footer {
padding: 5px;
border: 1px solid #888;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 25px;
}
<div class="card">
<div class="card_content">
<h2>Hello</h2>
<p>This is just a sample text</p>
</div>
<div class="card_footer">
<div class="">1</div>
<div class="">2</div>
</div>
</div>