Переполнение контента с карты осуществляется с использованием сетки CSS

Question

Когда я устанавливаю сетку, используя css -grid, и использую ограничение по высоте по вертикали: height: 90vh содержимое в (родительских div) картах (карты получены из среды Quasar, но любая другая, похоже, имеет похожий вид), течет через на меньших экранах. Есть ли способ установить содержимое для заполнения требуемой высоты, но если экран меньше, то отключить этот предел?

Вот кодекс, который показывает это поведение

https://codepen.io/pokepim/pen/wvaYNXp

Итак, главное, чтобы на больших экранах я хотел сохранить весь контент на экране (все карты, которые вы видите в коде) - прокрутка не нужна. Однако на экранах меньшего размера контент может стать прокручиваемым.

Answer 1

Использование медиазапросов

Пример

@media handheld or (max-height: 800px) {
    .div4{
        overflow-y: scroll;
    }
}

@media screen and (min-height: 800px) {
    .parent .div4 {
        height: 550px;
    }
}