Исправлен нижний колонтитул без переполнения контента

Question

Я пытаюсь получить фиксированный нижний колонтитул в моем html, который, как я знаю, можно сделать с абсолютным положением и установкой нижнего края.Когда я делаю это, когда мой контент становится больше контейнера, он переполняет нижний колонтитул.

Я попытался установить фиксированную высоту для своего контента.Это работает, но при просмотре в других разрешениях эти числа, конечно, больше не будут работать.

Это HTML:

<div class="container">
<div class="top">
</div>
<div class="content>
</div>
<div class="footer>
</div>
</div>

Это SCSS:

.container {
    position: absolute;
    min-height: 90vh;
    max-height: 90vh;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

.container, .top {
        color: $primary;
        width: 100%;
        display: grid;
        grid-template-columns: auto auto 1fr 250px;
        grid-template-rows: auto 1fr;
        border-bottom: 0.1rem solid $contrast;
        padding: 30px;
        align-items: baseline;
        overflow: auto;
}

.container, .content{
        position: relative;
        padding: 30px;
        font-size: 1.2rem;
}


.container, .footer {
        position: absolute;
        bottom:20px;
        width: 100%;
}

Я просто могу это понять.Также попробовал flex и grid ...

Спасибо за помощь!