How to make an ul with overflow fit within an absolute div

Question

I am a third-year student and now in an front-end web developer intern-ship. What I write here may seem unnecessary or evident, but know that I do it unpretentious. I think that the best way to improve myself pass by sharing stuff, event the smallest thing.

After some research I had to find the answer by myself, so maybe it will help some beginners about how parents / child works with absolute position!

I was experimenting a simple but problematic case with my html / css.

I had to make a div position: absolute; which contain an UL. Inside this UL, each LI are displaying a huge text depending of a click.

The problem I had, was to make this text scrollable. Thus, I knew the relation between a relative parent and an absolute child but I didn't know what could happen for the child of this child.

In fact, my child div was fitting the parent but the Ul (child of child) wasn't doing what I wanted it to do !

Here is what I had first : https://jsfiddle.net/5ooxkhrv/3/

Answer 1

As you can see, it took me some time to figure out that my UL child has to be in absolute position too, with a 100% height.

Here is the final : https://jsfiddle.net/5ooxkhrv/2/

ul {
  position: absolute;
  height: 100;
  overflow-y: auto;
}

Well, my English is quite bad then I hope my text isn't too boring to read. I made it short in purpose, and I hope it will be of some help.

This example fit well if you are doing a kind of FAQ page with 3 columns. (col1 : topic, col2 : question, col3: answer).

I would love if people could contribute, for example, explaining why the child has to be in absolute too. If this topic is useless, feel free to remove it !

Thank you for reading.