Allow vertical scroll (don't cut content)

Question

I have a modal on an event page, problem is when the content is below the fold, it get cut instead appear vertical scroll to scrolldown the content. You can see an example here (click the day 27, you will see that the content modal cut):

https://www.fundacioncb.es/agendafundacioncb

I attach an image too.

CSS Structure:

.modalDialog > div {
    max-width: 896px;
    position: relative;
    margin: 6% auto;
    margin-top: 90px;
    padding: 0;
    border-radius: 0px;
    background: #fff;
}

.modalDialog > div {
    margin-top: 150px !important;
}
.modalDialog * {
    display: block;
    float: none;
}

HTML

<div id="openModal27" class="modalDialog">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-top">
         <h3 class="modal-titulo">27 · 09 · 2019</h3>
      </div>
      <div class="articulos-dia">
         <div class="un-evento">
            <h3>Seminario formativo</h3>
            <h4>"La trata de mujeres con fines de explotación sexual desde un enfoque de género y crítico de derechos humanos"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/09/SEMINARIO-TRATA-2.jpg">
            <p></p>
            <div class="barrita"></div>
            <p> El 27 de septiembre en el Centro Cultural "Santo Domingo" de Fundación CB (Mérida).</p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Paisajes humanos"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/09/uta1xerq.jpeg">
            <p></p>
            <div class="barrita"></div>
            <p> Del 7 de septiembre al 12 de octubre en Arte Joven Galería (Calle San Isidro, 16C, Badajoz).</p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Migraña en Exposición"</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/cartel-merida.png">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 23 de septiembre al 4 de octubre en Centro Cultural Santo Domingo (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>Academia de dibujos y pinturas Miro</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/expo-academia-miro.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 15 de septiembre al 15 de octubre en Centro Cultural Santo Domingo (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Exposición</h3>
            <h4>"Haiku del alma", de Teresa Crespo</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/15-La-bru´jula-2.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>Del 10 al 27 de septiembre en Espacio CB Arte (Badajoz).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Formativo</h3>
            <h4>MALVALUNA</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/malvaluna.png">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre de 9:30h a 14:00h en el Centro Cultural “Santo Domingo” de Fundación CB (Mérida).</strong></p>
         </div>
         <div class="un-evento">
            <h3>Curso</h3>
            <h4>Asesoría e Imagen</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/mujer-seleccionando-fotografias-personas_1134-466.jpg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre en la biblioteca de la RUCAB.</strong></p>
         </div>
         <div class="un-evento">
            <h3>Concierto</h3>
            <h4>Iván Sanjuan</h4>
            <img src="https://www.fundacioncb.es/wp-content/uploads/2019/08/sk8dgs49.jpeg">
            <p></p>
            <div class="barrita"></div>
            <p><strong>El 27 de septiembre a las 20:30h en el salón de actos de la RUCAB.</strong></p>
         </div>
      </div>
   </div>
</div>

Answer 1

You can provide scroll to popup so you never lose any content. Add following css.

.articulos-dia {
    height: calc(100vh - 390px);
    overflow-y: scroll;
}

Answer 2

This is how you can set scroll for over flow content. Check the following code

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    .wrapper{
      overflow-y: scroll;
      border: 1px solid #e5e5e5;
      max-width: 750px;
      margin: 0 auto;
      max-height: 300px;
      padding: 20px;
    }
      .div-1 p{
          color: #3d3d3d;
          font-size: 16px;
          line-height: 1.5;
          margin: 0 0 20px;
      }
    </style>
</head>
<body>

<div class="wrapper">
  <div class="div-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>


</body>


</html>