Форма начальной загрузки - прокрутка не появляется при изменении размера экрана

Question

Я работаю над проектом с формой Bootstrap. Очень просто, я хотел бы, чтобы форма имела полосу прокрутки при изменении размера окна. Я попытался добавить класс overflow-auto к моему div, но это не сработало. Поэтому, когда я изменяю размер окна, прокрутка не появляется. Вот мой код

.form-container {
	border-radius: 25px;
  border: 1px solid black;
	padding: 15px;
	position: fixed;
	top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
}

.register-container { max-width: 500px; }

.title-header {
	font-size: 25px;
	font-weight: bold;
}

<div class="overflow-auto container form-container register-container">
    <h1 class="title-header">REGISTER</h1>
    <form id="register" method="post" action="register">
        <?php writeMessageBoxIfMessage($message); ?>
        <div class="form-group row">
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">FIRST NAME</label> <br>
                <input id="firstname" name="firstname" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">LAST NAME</label> <br>
                <input id="lastname" name="lastname" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">EMAIL</label> <br>
                <input type="email" id="email" name="email" maxlength="255" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">PASSWORD</label> <br>
                <input type="password" id="password" name="password" maxlength="80" required>
            </div>
            <div class="col-sm-12">
                <label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm">CONFIRM PASSWORD</label> <br>
                <input type="password" id="confirm-password" name="confirm-password" maxlength="80" required>
            </div>
            <div class="col-sm-6">
                Already have an account? <br> Click <a href="login">here</span></a> to login.
            </div>
            <div class="col-sm-6">
                <input id="register" type="submit" name="submit"
                    value="REGISTER" />
            </div>
        </div>
    </form>
</div>

Может кто-нибудь дать несколько советов, чтобы я мог прокрутить их?

Answer 1

Не могу повторить это в данный момент, но попробуйте использовать положение: абсолютное;

и отдай контейнер положение: относительное;

Вместо использования фиксированной позиции.

Дайте мне знать, если это не сработает.

Answer 2

Надеюсь, вам нужна внутренняя прокрутка, если форма больше по высоте.

Используйте следующий CSS,

Попробуйте.

#register {
    max-height: 200px;
    overflow: scroll;
}