html - Bootstrap 表单 - 调整屏幕大小时不会出现滚动

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

目前无法复制，但请尝试使用position:absolute；

然后给一个容器position:relative；

而不是使用“固定”位置。

如果这不起作用，请告诉我。