Выровняйте элементы снизу, сохраняя растяжение во flexbox

Question

Я использую flexbox для построения следующего макета карт

.card {
    flex-basis: calc(100% - 40px);
    border-radius: 4px;
}

.card__content {
    padding: 25px;
}

.card__footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

Я пытаюсь добиться того, чтобы нижний колонтитул карты всегда былвыровнены по дну.Когда я пытаюсь добавить следующий код, я теряю растяжение, и элементы больше не имеют одинаковую высоту

.card {margin-bottom: auto;}

Есть идеи, в каком направлении я должен искать решение?

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>

Answer 2

Попробуйте использовать " align-items-end ".

Руководство по начальной загрузке