Problem with scrolling list that overlaps div

I'm trying to make a simple list in CSS to display some events and if you hover on an event it should show the details of that event. Due to the length of the list, I've created a simple scrolling bar, but with the scrolling bar when you hover on an event, the div with hides under the rest of the page. If I don't use the scroll bar this problem doesn't occur. I will upload the screenshot with and without scroll bar.

 function setEventi(month1, day1, year1) {
  var monthnum = getMonthFromString(month1)

  var datascelta = complete(day1) + "-" + complete(monthnum) + "-" + year1
  var today = new Date();

  readTextFile("./data.json", function(text) {
    var evento = [{
        "classe": [
          "NULL|",
          "1EcB|",
          "1EcC|"
        ],
        "nomeEvento": "uikl",
        "argomento": "jkl",
        "ora_inizio": "08:08",
        "ora_fine": "08:08",
        "dataI": "04-04-2022",
        "dataF": "04-04-2022"
      },
      {
        "classe": [
          "1EcA|",
          "1EcB|",
          "1EcC|",
          "1TB|"
        ],
        "nomeEvento": "Epic Fight from Jotaro Kujo and Dio Brando",
        "argomento": "MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA",
        "ora_inizio": "07:11",
        "ora_fine": "08:15",
        "dataI": "05-04-2022",
        "dataF": "06-04-2022"
      },
      {
        "classe": [
          "NULL|",
          "1EcB|",
          "1EcC|"
        ],
        "nomeEvento": "uikl",
        "argomento": "jkl",
        "ora_inizio": "08:08",
        "ora_fine": "08:08",
        "dataI": "04-04-2022",
        "dataF": "04-04-2022"
      },
      {
        "classe": [
          "1EcA|",
          "1EcB|",
          "1EcC|",
          "1TB|"
        ],
        "nomeEvento": "Epic Fight from Jotaro Kujo and Dio Brando",
        "argomento": "MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA MUDA",
        "ora_inizio": "08:11",
        "ora_fine": "08:15",
        "dataI": "05-04-2022",
        "dataF": "06-04-2022"
      }
    ];
    var arr = []
    for (i = 0; i < evento.length; i++) {
      if (datascelta >= evento[i].dataI && datascelta <= evento[i].dataF) {
        var aTmp = null
        var giorno = today.getUTCDate();
        var GiornoFine = evento[i].dataF;
        var GiornoDefinitivo = GiornoFine[0] + GiornoFine[1];
        if (giorno < GiornoDefinitivo) {
          const list = document.getElementById("oggetto_da_modificare");
          if (evento[i].classe[0] === "NULL|") {
            arr.push('0')
            console.log("SIUM")
          } else {
            if (aTmp == null) {
              for (j = i; j < evento.length; j++) {
                aTmp = evento[j].ora_inizio.split(":");
                var nStartMin = (Number(aTmp[0]) * 60) + Number(aTmp[1]);

                arr.push(nStartMin)
              }
            }
            list.innerHTML += "<li class='ciaone' id=" + arr[i] + ">" + evento[i].nomeEvento + " | " + removeBarra(evento[i].classe) + "<div class='saas'> <br>" + "<strong>Inizio </strong>" + evento[i].dataI + " " + evento[i].ora_inizio + "<br><br>" + "<strong>Fine </strong>" + evento[i].dataF + " " + evento[i].ora_fine + "<br><br> <strong>Argomento </strong> <br>" + evento[i].argomento + "</div></li> ";
          }
        }
      }
    }
    sort();
  });

}

.box ul {
  position: relative;
  background: #fff;
}

.box ul li {
  list-style: none;
  padding: 10px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px rgba(0, 0, 0, .1);
  transition: transform 0.5s;
  margin-right: 100px;
  margin-top: 10px;
}

ul {
  display: block;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  width: 87%;
  z-index: 0;
  max-height: 215px;
  overflow: hidden;
  overflow-y: hidden;
}

.box li {
  margin-left: -28px;
  text-align: center;
}

.box ul:hover li {
  opacity: 0.2
}

.box ul li:hover {
  transform: scale(1.1);
  margin-bottom: 1px;
  opacity: 1;
  z-index: 100;
  background: #c617c9;
  box-shadow: 0 5px rgba(0, 0, 0, .2);
  color: #fff;
}

.saas {
  border-style: solid;
  border-color: #076ce4;
  display: none;
  position: absolute;
  min-width: 281px;
  margin-top: -10.4%;
  /*margin-left: -3.6%;*/
  margin-left: -103.6%;
}

.ciaone:hover .saas {
  display: block;
  background-color: #fff;
  color: #000;
  position: absolute;
  z-index: 1000;
  opacity: 1;
  max-width: 100%;
}