My accordian menu doesnt accomodate the extra text?

I made an accordian menu using html css and javascript. The problem is that almost all the tutorials online suggest to give a fixed height to the revealed text div. This doesnt work with the larger texts. On setting the height in percentages , transition effects dont work.

The relevant codepen is shared here:

Add the following css rules to your css file:

::-webkit-scrollbar {
    width: 5px;
  background-color: gray;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Also, change the overflow property to auto here:

.accordion .content-container .answer{
    padding-top:10px;
    line-height: 1.5;
    width:100%;
    font-size: 1.5rem;
    height: 0;
    overflow: auto; ......HERE!
    transition:0.4s ;
}

You can now scroll through the text in each text div:

Good luck on your project.