如何用纯CSS实现网格行在高度不足时自动隐藏？

<body>采用绑定浏览器窗口高度的Grid布局，其中一列包含<aside>元素，该元素为1列4行的Grid，包含两个固定高度标题和同为1列Grid的.asidebox类容器。需求是：当浏览器窗口高度不足以显示所有自然高度的行时，.asidebox仅显示能容纳的行，行保持自然高度不伸缩。

尝试通过让.asidebox垂直收缩适配窗口+配置grid-template-rows: repeat(auto-fit, ...)实现，但多种配置均未达成预期，调整<aside>的grid-template-rows也无效。

核心思路是利用容器高度限制+溢出隐藏结合Grid的内容对齐，实现超出部分自动隐藏：

• 调整<aside>的Grid行配置，让两个.asidebox的高度分配逻辑改为自适应内容但不超出可用空间：

aside {
    background-color: darkkhaki;
    display: grid;
    grid-template-columns: 1fr;
    /* 标题用auto，asidebox用minmax(0, auto)，避免强行拉伸 */
    grid-template-rows: auto minmax(0, auto) auto minmax(0, auto);
    align-content: start; /* 让Grid内容从顶部开始排列，不拉伸 */
}

• 给.asidebox添加高度限制和溢出隐藏，同时保持行的自然高度：

.asidebox {
    display: grid;
    grid-template-rows: repeat(auto-fill, min-content); /* 按内容高度生成行 */
    max-height: 100%; /* 限制高度不超过父容器分配的空间 */
    overflow: hidden; /* 隐藏超出容器的行 */
    min-height: 0; /* 确保容器能收缩到0，避免父容器强制拉伸 */
}

• 保留原有文章样式，确保内容自然高度：

.asidebox > article {
    border: 2px solid green;
    padding: 2px;
    background-color: yellow;
}

为什么之前的auto-fit不生效？ #

repeat(auto-fit, ...)在Grid的行方向上的行为和列方向不同：auto-fit主要用于响应式列布局，会自动创建/删除列来适配容器宽度，但在行方向上，浏览器不会自动删除超出高度的行，只会尝试拉伸或压缩行高。因此需要通过overflow: hidden直接隐藏超出容器的行内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p, h1, h2, h3, h4 {
            margin: 0;
            padding: 0;
        }
        
        body {
            display: grid;
            margin: 0;
            border-bottom: 3px solid purple;
            background-color: #f1e2ad;
            grid-template-columns: 5fr minmax(min-content, 30%);
            grid-template-rows: 99vh;
            overflow-y: hidden;
        }

        aside {
            background-color:darkkhaki;
            display: grid;
            align-content: start;
            grid-template-columns: 1fr;
            grid-template-rows: auto minmax(0, auto) auto minmax(0, auto);
        }
        
        .asidebox {
            display: grid;
            min-height: 0;
            grid-template-rows: repeat(auto-fill, min-content);
            max-height: 100%;
            overflow: hidden;
        }

        .asidebox > article {
            border: 2px solid green;
            padding: 2px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="esq"></div>
    <aside id="dir">
        <h2>News</h2>
        <div class="asidebox">
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
        </div>
    
    
        <h2>Top reporters</h2>
        <div class="asidebox">
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
        </div>
    </aside>
</body>
</html>

内容的提问来源于stack exchange，提问作者Fabricio Rocha