具有滚动弹出窗口的自动高度

Question

我在移动版本上有一个弹出窗口，但我无法让用户向下滚动以在弹出窗口上查看其余内容。我想保留height:auto用于UX。

更新：实际上，这很奇怪，当我将其与Google Chrome上的iPhone 6/7/8视图结合使用时，我可以向下滚动，但顶部会切掉

Large phone screen - small pop-up that does not need scroll

Large phone screen - large pop-up that does need to scroll

Small phone screen - can scroll but top is cut

style.css

   .model{
        z-index: 1000;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.7);
        position:fixed;
        top:0;
        display: flex;
        justify-content: right;
        align-items: center;
        font-family: Poppins;
        display: none;

    }

.model-content{
    width:1000px;
    height: auto;
    background-color: white;
    border-radius: 20px;
    padding: 1rem 2.5rem 1rem 2.5rem;
    position: relative;
}

popup.php

<div class="model-content">
    <div class="close"><i class="far fa-times-circle"></i></div>
    <div class="header-job-description">
      <h2><?php echo $row['title']; ?></h2>
      <p><i class="fas fa-thumbtack"></i><?php echo $row['location']; ?></p>
      <p><i class="fas fa-briefcase"></i><?php echo $row['type']; ?></p>
    </div>
    <div class="job-description">
      <p><?php echo $row['description']; ?></p>
    </div>
    <div class="job-missions">
      <p>Your Missions:</p>
      <ul>
        <?php if(!empty($missions)){ ?>
          <?php foreach ($missions as $key =>$mission) { ?>
             <li><?php echo $mission['mission']; ?></li>
          <?php } ?>
        <?php } ?>
      </ul>
    </div>
    <div class="job-requirements">
      <p>What We Are Looking For:</p>
      <ul>
        <?php if(!empty($requirements)){ ?>
          <?php foreach ($requirements as $key =>$requirement) { ?>
             <li><?php echo $requirement['requirement']; ?></li>
          <?php } ?>
        <?php } ?>
      </ul>
    </div>
    <div class="apply-job">
      <a href="./application.php?id=<?php echo $id; ?>" class="button-1">Apply Now</a>
    </div>
  </div>