Bootstrap 4. Высота карты ограничена родительской высотой при переполнении

Question

Я хотел бы иметь колоду карт с несколькими картами, расположенными рядом (даже на мобильном устройстве) с горизонтальной и вертикальной прокруткой.

Родитель карт имеет заданную высоту, и я не удается подобрать размер карты (фактически, границы) к содержимому карты, которая успешно помещена «позади» родителя.

Вот моя текущая скрипка: https://jsfiddle.net/axel50397/eLrkasb0/

.h-scrollable {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.h-scrollable > .card {
  flex: 0 0 auto;
  width: 250px;
}

Answer 1

Вам необходимо установить контейнер с заданной c высотой, которую вы хотите, и установить overflow-y: scroll для этого контейнера:

<div style="height: 200px; overflow-y: scroll;">
    <div class="border-top border-bottom card-deck h-scrollable p-2 w-100">
        <div class="card mx-2">
            <div class="card-header">
                Wednesday 1 April 2020
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-sm btn-primary btn-block">12:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">13:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">14:00</button>
                ...
            </div>
        </div>
    </div>
</div>

Проверьте здесь: https://jsfiddle.net/uyox7zLt/2/