使用 CSS 网格后从 carb 溢出的内容

Question

当我使用 css-grid 设置网格并使用垂直高度限制时：height: 90vh （父 div）卡片中的内容（卡片来自 Quasar 框架，但任何其他似乎都显示出类似的行为）在较小的屏幕。有没有办法将内容设置为填充所需的高度，但如果屏幕较小，则禁用该限制？

这里是显示这种行为的 codepen

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

所以最重要的是，在大屏幕上，我希望将所有内容都保留在屏幕上（您在 codepen 中看到的所有卡片）——无需滚动。然而，在较小的屏幕上，内容可能会变得可滚动。

Answer 1

使用media queries

示例

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

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