How to Add a Scrollbar to a Status Container When Content Exceeds 100% Height Without Setting a Fixed Height?

I’m working on a responsive layout where I want the .status container to have a scrollbar if its content exceeds the available space. However, I don’t want to set a fixed height for the .status container since the layout needs to be flexible and responsive. I’m looking for a solution primarily using HTML and CSS, but I’m open to JavaScript, TypeScript, or Angular solutions if necessary.

In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I’m not sure how to achieve this without setting a fixed height.

Is there a way to make the .status container handle overflow correctly in this scenario?

Here is the code I’m working with:

<!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;
        }

        .status {
            height: 100%;
            max-height: 100%;
            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>