bootstrap -4 карта не заполняет высоту до конца ряда

Question

Я работаю над кодом в этом jsfiddle: https://jsfiddle.net/martinradio/8g034hyk/23/ И у меня возникли проблемы с тем, чтобы одна карта стала более отзывчивой.

Как вы можете видеть на этом изображении, поле данных card3 расширится, чтобы соответствовать нижней части строки, где заканчивается поле данных card2 (Отлично!)

Но если поле card3data длится дольше, до точки, где оно выходит за пределы конца поля card2data,

Итак, что я пытался исправить в jfiddle сегодня весь день, это сделать так, чтобы моя коробка card2data увеличивала свою высоту, чтобы соответствовать ящику card3data, устраняя пустое пространство и выравнивая нижнюю часть ящиков card2 и card2, чтобы соответствовать в той же точке.

Самое близкое, что я получил, это добавление style="height: 100%", но единственная проблема состоит в том, что это заставляет коробку расширяться за точку, в которой я пытаюсь закончить. Я уверен, что есть какое-то простое решение bootstrap4 / html / js / css для достижения того, что я ищу, и я был бы признателен за любую помощь в его поиске! Спасибо

Answer 1

Попробуйте следующие css и html (добавлен класс для первого столбца).

CSS

.first-row{
    max-height: max-content;
}

HTML

<div class="row">
            <!-- left column -->
    <div class="col  d-flex flex-column">
        <!-- card 1 (top) -->
        <div class="col d-flex first-row">
            <div class="card w-100">
                card 1 data <br>
                card 1 data <br>
                card 1 data <br>
                card 1 data <br>
                card 1 data <br>
                card 1 data <br>
            </div>
        </div> <!-- ./top card 1 -->
        <br>
        <!-- card 2 (bottom) -->
        <div class="col d-flex"> <!-- TRIED adding style="height: 100%" but this expands to very bottom -->
            <div class="card w-100 ">
              card 2 data <br>

                card 2 data <br>
                card 2 data <br>
                card 2 data <br>
            </div>
        </div> <!-- ./bottom card 2 -->
    </div>
    <!-- right column -->
    <div class="col d-flex">
      <div class="col d-flex">
        <!-- card 3 (long) -->
        <div class="card w-100 h-100" style="height:100%">
                card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>card 3 data <br>
                card 3 data <br>
                card 3 data <br>
        </div>
      </div>
    </div>

</div> <!-- ./card 3 -->
<br>
<!-- bottom row (table) -->
<div class="row">
    <div class="col">
        <div class="col ">
            <div class="card w-100">
                card 4 data <br>
                card 4 data <br>
                card 4 data <br>
                card 4 data <br>
            </div>
        </div> <!-- ./top card -->
    </div>
</div> 

Пожалуйста, проверьте вашу скрипку, я сохранил свой код.