Почему высота моего контейнера не соответствует содержимому?

Question

Я не могу понять, почему фон моего контейнера (основного контейнера) не растягивается вместе с содержимым внутри. Похоже, что фон контейнера застрял на начальной высоте просмотра. Когда я прокручиваю, передаю начальную высоту просмотра, остальная часть белого цвета.

Вот css

.main-container {
    margin: 0;
    padding: 0;
    font-family: 'montserrat';
    height: fit-content;
}

.main {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: greenyellow;
    border-radius: 10px;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

<div class="main-container">
    <div class="main">
        <h1>Signup</h1>
        <form method="POST">
            <div class="txt-field">
                <input type="text" required>
                <span></span>
                <label>First Name</label>
            </div>
            <h1>Upload Image</h1>
            <button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
            <input type="submit" value="Signup">
        </form>
    </div>
</div>

Так выглядит изначально.

This is what it looks like when I scroll down

Answer 1

Причина в том, что у вас есть position: absolute в вашем .main классе - любые абсолютно позиционированные элементы будут исключены из обычного потока документов и не будут влиять на макет их родителя (ов).

Похоже, вы используете абсолютное положение, чтобы попытаться центрировать элемент .main. Рассматривали ли вы вместо этого использование flexbox на .main-container? Использование flexbox с justify-content: center и align-items: center - это простой способ центрировать элемент внутри его родительского элемента, сохраняя при этом обычный поток документов.