Align items to bottom while maintaining stretch in flexbox

Question

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?

Answer 1

.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>