如何实现容器内容滚动：解决固定布局中的内容溢出问题

.formContainer {
  max-width: 300px;
  padding: 20px;
  background-color: #fff;
  /* 缺少高度和溢出控制 */
}

.formContainer {
  max-width: 300px;
  padding: 20px;
  background-color: #fff;
  height: 300px; /* 设置一个固定高度 */
  overflow: auto; /* 当内容溢出时显示滚动条 */
}

<div class="openBtn">
  <button class="openButton" onclick="openForm()"><strong>Open Form</strong></button>

  <div class="loginPopup">
    <div class="formPopup" id="popupForm">
      <form action="/action_page.php" class="formContainer">
        <h2>Please Fill The Form</h2>
        <label for="email">
          <strong>E-mail</strong>
        </label>
        <input type="text" id="email" placeholder="Your Email" name="email" required>
        <label for="Name">
          <strong>Password</strong>
        </label>
        <input type="text" id="name" placeholder="Your Name" name="psw" required>

        <label for="Address">
          <strong>Address</strong>
        </label>
        <input type="text" id="Address" placeholder="Your Address" name="psw" required>
        <!-- 假设这里还有更多表单字段，导致内容溢出 -->
        <label for="City">
          <strong>City</strong>
        </label>
        <input type="text" id="City" placeholder="Your City" name="city" required>
        <label for="Zip">
          <strong>Zip Code</strong>
        </label>
        <input type="text" id="Zip" placeholder="Your Zip Code" name="zip" required>
        <label for="Phone">
          <strong>Phone Number</strong>
        </label>
        <input type="text" id="Phone" placeholder="Your Phone Number" name="phone" required>
        <button type="submit" class="btn">Log in</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
      </form>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.openBtn {
  display: flex;
  justify-content: left;
}
.openButton {
  border: none;
  border-radius: 5px;
  background-color: #1c87c9;
  color: white;
  padding: 14px 20px;
  cursor: pointer;
  position: fixed;
}
.loginPopup {
  position: relative;
  text-align: center;
  width: 100%;
}
.formPopup {
  display: none;
  position: fixed;
  left: 45%;
  top: 5%;
  transform: translate(-50%, 5%);
  border: 3px solid #999999;
  z-index: 9;
}
.formContainer {
  max-width: 300px;
  padding: 20px;
  background-color: #fff;
  height: 300px; /* 定义固定高度 */
  overflow-y: auto; /* 仅在垂直方向溢出时显示滚动条 */
  /* 或者使用 overflow: scroll; 始终显示滚动条 */
}
.formContainer input[type=text],
.formContainer input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 20px 0;
  border: none;
  background: #eee;
}
.formContainer input[type=text]:focus,
.formContainer input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
.formContainer .btn {
  padding: 12px 20px;
  border: none;
  background-color: #8ebf42;
  color: #fff;
  cursor: pointer;
  width: 100%;
  margin-bottom: 15px;
  opacity: 0.8;
}
.formContainer .cancel {
  background-color: #cc0000;
}
.formContainer .btn:hover,
.openButton:hover {
  opacity: 1;
}

function openForm() {
  document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
  document.getElementById("popupForm").style.display = "none";
}