Переполнение: прокрутка в div, содержащем динамический ul

var sujetCourant;
var url = "../assets/data/data.json";
var idEltCourant= 0;
var risques2= " Le(s) Risque(s) sur ce(s) projet(s)";
var attentes2 = "Le(s) Attente(s) sur ce(s) projets(s)";
var scroll= $('div.scroll'),
$scrollTo =$('div.scroll');

$(document.getElementsByClassName('.scroll')).ready(function(){
    //on charge le fichier json
     $.getJSON(url, function (data){
      var nbRisqueSujetCourant = 0;
      var nbAttenteSujetCourant = 0;
      //je recupère la position de ma element section  
       
     //on parcours le fichier tant que la fin n'est pas atteinte
       while( idEltCourant < data.projets.length){ 
         //recuperation du nom du sujet courant
         sujetCourant = data.projets[idEltCourant].titre;
        //recuperation  du nombre d'attentes ou alertes du sujet courant
        nbAttenteSujetCourant = data.projets[idEltCourant].attentes[0].nbattente;
         //recuperation du nombres de risques du sujet courant;
         nbRisqueSujetCourant = data.projets[idEltCourant].risques[0].nbrisques;
        
         // affichage suivant le nombre de risques ou d'alertes par SUJETS.
         // si le sujet courant n'a ni d'alertes ni de risques on passe au sujets suivant sans traitements
          if (nbAttenteSujetCourant == 0 && nbRisqueSujetCourant  == 0 ) {
       
              
            idEltCourant =idEltCourant +1;
           } 
        // cas ou le sujet n'a pas de risques on affiche seulement les attentes
         // Affichage en couleur Rouge les attentes
        else if (nbAttenteSujetCourant != 0 && nbRisqueSujetCourant  == 0) {          
           //Afichage du nom du projet
           $('ul.resultatdetails').css('color','#00008B').css('padding-left','10%').css('padding-bottom','3%').text( sujetCourant).css('padding-top', '0%');
          
          //affichage du titre Attente(s)
          $('ul.contenuattentes').css('padding-left','10%').text(attentes2).css('padding-top', '3%').css('color', '#000000');
         // on fera une boucle qui affichera par ligne une liste d'attentes
  //       //  for( var attentecourant= 0; attentecourant<nbAttenteSujetCourant; attentecourant++){
       
  //       //  }
  //        console.info(sujetCourant);
  //       // console.info('------------------------------');
  //       // console.info(nbAttenteSujetCourant);
          
        idEltCourant =idEltCourant +1;
  //       }
  
  //       // affichage en jaune
  //       else if (nbAttenteSujetCourant == 0 && nbRisqueSujetCourant  != 0){
  //         $('ul.resultatdetails').css('color','#00008B').css('padding-left','7%').css('padding-bottom', '3%').text( sujetCourant).css('padding-top', '3%');
  //       /*   console.info(sujetCourant);
  //         console.info('------------------------------');
  //         console.info(nbAttenteSujetCourant);
  
  //         console.info('------------------------------');
  //         console.info(nbRisqueSujetCourant);
  //         console.info('------------------------------'); */
  //         idEltCourant =idEltCourant +1;
  //       }
  //       else{
  //         $('ul.resultatdetails').css('color','#00008B').css('padding-left','7%').css('padding-bottom', '3%').text( sujetCourant).css('padding-top', '3%');
  //         // console.info(sujetCourant);
  //         // console.info('------------------------------');
  //         // console.info(nbAttenteSujetCourant);
  
  //         // console.info('------------------------------');
  //         // console.info(nbRisqueSujetCourant);
  //         // console.info('------------------------------');
         // idEltCourant =idEltCourant +1;
        }
    idEltCourant =idEltCourant +1;
       
      }
    console.info(data.projets.length);
  });
  
});
  

#details {
    margin-top: -5%;
    background-color: floralwhite;    
    padding-left: 3%;
    color: black;  
    height: 15%; 
    font-size: 180%;    
}
#p {
    padding-top: 2%;
    height: 100%;
    }
.resultatdetails{
    background-color: floralwhite;
    margin-top: -1%;
    margin-bottom: -1.7%;
    font-size: 120%;
    font-style:  italic;
    height: 70%;
    width: 90%;  
    padding-left: 2%;
    padding-top: 0.2%;
    text-align: left;  
    list-style:none;


}

.scroll{
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    margin-left: 4.5%;
    margin-right: 3.5%;
    margin-top: 5%;
    font-family: Verdana, Fantasy, Trebuchet MS, normal, sans-serif;
    font-weight: normal;
    width:  53.5%;
    height: 98% relative;
    border-style:groove;
    border-color: black;
    border-style:10% groove;
    overflow-y: scroll;

    position: absolute;
   
}

.detailsrouge{
    color: red;
    min-height: 40%;
}

.detailsjaune{
    color: gold;
   min-height: 40%;
}
.contenurisques, .contenuattentes{
    list-style:none;
    padding-bottom: 2%;
    padding-top: 1.5%;  
    font-size: 100%; 
    overflow-y: inherit;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;

}

  <div class = "scroll"> 
  <article id = "details">
    <p id = "p">Détail des risques et attentes d'arbitrage.</p>
  </article>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <ul class = "resultatdetails">
    <ul class = "contenuattentes" >
      <ul class = "detailsrouge">
        
        
      </ul>
    </ul>
    <ul class = "contenurisques">
      <ul class = "detailsjaune">
              
      </ul>
    </ul>
  </ul>    

</div>