溢出：在包含动态ul的div中滚动

Question

我正在使用angular4，ccs3和jquery 3.3.1开发API。我希望我的代码加载一个json文件，其中包含有关某些项目的信息，并且我希望我的脚本将风险和有关每个项目的警报加载到HTML组件详细信息中，并在我的div中使用class =“ scroll” 。这个div包含ul。

到目前为止我尝试过的事情：

我将自己的溢流：auto属性放入了高度为我身体大小35％的.scroll中。把这个不起作用。我还使用了y自动溢出和y滚动：进行测试。但是，我的滚动条无法正常工作。它显示了自己，但隐藏了我的脚本内容结果（在ligne 36之后）。我也使用scrollTop但不起作用。我也尝试使用绝对位置并减少边距和填充，但是它们都不起作用。

我正在使用Chrome进行开发。

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.log(sujetCourant);
  //       // console.log('------------------------------');
  //       // console.log(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.log(sujetCourant);
  //         console.log('------------------------------');
  //         console.log(nbAttenteSujetCourant);
  
  //         console.log('------------------------------');
  //         console.log(nbRisqueSujetCourant);
  //         console.log('------------------------------'); */
  //         idEltCourant =idEltCourant +1;
  //       }
  //       else{
  //         $('ul.resultatdetails').css('color','#00008B').css('padding-left','7%').css('padding-bottom', '3%').text( sujetCourant).css('padding-top', '3%');
  //         // console.log(sujetCourant);
  //         // console.log('------------------------------');
  //         // console.log(nbAttenteSujetCourant);
  
  //         // console.log('------------------------------');
  //         // console.log(nbRisqueSujetCourant);
  //         // console.log('------------------------------');
         // idEltCourant =idEltCourant +1;
        }
    idEltCourant =idEltCourant +1;
       
      }
    console.log(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>

我的结果在这里：