当页面向下滚动时，如何获得不溢出的div来填充整个高度？

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 设置父容器高度为视口高度 */
    }

    .content {
        flex-grow: 1; /* 子元素自动扩展填充剩余空间 */
        overflow: auto; /* 内容溢出时显示滚动条 */
    }
</style>

<div class="container">
    <div class="content">
        <!-- 内容 -->
    </div>
</div>

<style>
    .container {
        position: relative;
        height: 100vh; /* 设置父容器高度为视口高度 */
    }

    .content {
        position: absolute;
        top: 0;
        bottom: 0;
        overflow: auto; /* 内容溢出时显示滚动条 */
    }
</style>

<div class="container">
    <div class="content">
        <!-- 内容 -->
    </div>
</div>