如何在不设固定高度时，给内容超限的.status容器添加滚动条？

要在不设置固定高度的前提下让.status容器内容超出时显示滚动条，只需通过CSS修改打破Grid布局的默认高度限制即可，具体实现如下：

关键修改点 #

• 给.status容器添加min-height: 0，打破Grid子元素默认的min-height: auto行为，确保容器高度严格继承父元素的可用空间，而非被内容撑开。
• 保留.status的height: 100%和overflow-y: auto配置，确保内容超出时自动触发滚动。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            color: #fff;
            text-align: center;
        }

        .container {
            padding: 20px;
            width: 100%;
            height: 100%;
            display: grid;
            grid-auto-rows: auto 1fr;
            row-gap: 20px;
        }

        .content-1 {
            width: 100%;
            height: 60px;
            background-color: yellow;
        }

        .content-2 {
            width: 100%;
            height: 100%;
            background-color: pink;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 20px;
            align-items: stretch; /* 显式声明确保子元素占满父容器高度 */
        }

        .status {
            height: 100%;
            min-height: 0; /* 核心修改：打破Grid子元素的默认高度限制 */
            background-color: blue;
            padding: 5px;
            overflow-y: auto;
        }

        .card {
            width: 100%;
            height: 200px;
            background-color: green;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-1"></div>
        <div class="content-2">
            <div class="status">
                <div>Status</div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
            <div class="status">
                <div>Status</div>
            </div>
        </div>
    </div>
</body>
</html>

方案说明 #

1. 响应式适配逻辑：.container通过grid-auto-rows: auto 1fr让.content-2占据视口剩余高度，.content-2使用auto-fit实现列数自动适配窗口宽度，全程无需固定尺寸。
2. 滚动触发核心：min-height: 0是关键，它允许.status容器在内容超出时保持父元素给定的高度，从而触发overflow-y: auto显示滚动条。
3. 兼容性：基于CSS Grid标准实现，支持所有现代浏览器（Chrome、Firefox、Safari 10.1+、Edge），无需JavaScript介入。

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