How Can I Make Contents Within A Container Scrollable?

Question

Within my container is a form and to add more fields, I have to increase the height of the container because the container position is fixed so, instead of increasing the height of the container, I thought it would be more reasonable to add a scroll bar to the container and make the contents within the container to be scrollable.

Problem is, I don't know how to make the contents within the container to be scrollable and I will appreciate any help.

See code below;

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

* {
        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;
      }
      .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;
      }

<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>
          <button type="submit" class="btn">Log in</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        </form>
      </div>
    </div>

Answer 1

You can set a height to .formContainer then set overflow to scroll

for Example

.formContainer {
    max-width: 300px;
    padding: 20px;
    background-color: #fff;
    height: 300px;
    overflow: scroll;
}