Bootstrap 4 карты, вытяните последний нижний колонтитул карты, чтобы заполнить пространство

Question

Я пытаюсь расширить последний нижний колонтитул карты, чтобы заполнить остальное пространство, если на нем нет кнопок. Я безуспешно пробовал несколько гибких комбинаций.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-4 mb-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
<div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
<a target="_blank" title="" href="http://maps.apple.com/maps?daddr=34.8043103,-82.5869584" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i> Venue</a>
      </div>
    </div>

  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-header text-center">
        <span data-bind="html: TimeFormatted">8:00 AM EST</span>, <span class="venue" data-bind="text: Venue">JB Red Owens, Field 1</span>
      </div>
      <div class="card-body">
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: AwayTeamName">(A1)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">4</span>
          </div>
        </div>
        <div class="d-flex">
          <div class="text-truncate mr-auto">
            <span data-bind="text: HomeTeamName">(A2)</span><span style="display: none;">*</span>
          </div>
          <div>
            <span class="final-score">5</span>

          </div>
        </div>
      </div>
      <div class="card-footer d-flex">
        <div class="text-truncate mr-auto"><span>8U</span>, <span>Pool A</span></div>
        <div class="">Final</div>
      </div>
      <div class="card-footer text-center">
      </div>
    </div>

  </div>
</div>

ул

Answer 1

Вы можете попробовать следующее (часть решения была получена из этого ответа ):

.card {
  height: 100%;
}

.card-body {
  flex: 0 1 auto !important;
}

.card-footer.text-center {
  flex: 1;
}

Я создал маленькую скрипку , показывающую результат:

Отображает результат