Вставьте div в нижней части карт одинаковой высоты

Question

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

.equal-height
  display: flex
  flex-direction: column
  height: 100%

Мой HTML выглядит как

<div class='columns is-multiline'>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
</div>

Который производит что-то вроде

Теперь я пытаюсь заставить card-footer придерживаться нижней части карты, как показано ниже.

Я попробовал несколько вещей с flex, но они на самом деле не имеют смысла. Есть идеи, как мне это сделать?

Answer 1

Добавить этот CSS

.card-footer {
  margin-top: auto;
}

рабочая демоверсия: https://jsfiddle.net/baLg7940/

Answer 2

Добавить "flex: auto;" в '. Card-content' , чтобы нижний колонтитул карты прилипал к нижней части карты. Вот рабочая ссылка jsfiddle .

.equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equal-height .card-content {
  flex: auto;
}