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 >
      <button  onclick="openForm()"><strong>Open Form</strong></button> 
 
 <div >
      <div  id="popupForm">
        <form action="/action_page.php" >
          <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" >Log in</button>
          <button type="button"  onclick="closeForm()">Close</button>
        </form>
      </div>
    </div>

CodePudding user response：

The easiest solution is to make the height or the width of the container to be auto and the overflow property to auto

CodePudding user response：

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;
}