Scroll parent div with scrollable child that has content to scroll

Question

I have a parent and child divs that are both scrollable. The parent div has a fixed height. The child div has a dynamic height and it scrollable depending on its content.

How can I achieve seamless controlling when the child element has very long content? The problem is that if the parent scroll is at the very top, the scroll of the child element cannot scroll further down unless the mouse moves a bit to have focus on the parent so that the scroll continues.

The code is below.

 .outer { width: 400px; background-color: antiquewhite; height: 400px; overflow-y: scroll; } h2 { margin-bottom: 500px; }.inner { height: 800px; width: 80%; overflow-y: scroll; background-color: aquamarine; }

 <div class="outer"> <div class="inner"> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> </div> </div>

Answer 1

One solution (If suitable for your use case) would be to do the below with the CSS.

  .outer {
        width: 400px;
        background-color: antiquewhite;
        height: auto;
        overflow-y: hidden;
    }

    h2 {
        margin-bottom: 500px;
    }

    .inner {
       max-height: 400px;
       width: 100%;
       overflow-y: auto; 
       background-color: aquamarine;    
    }

Note the change on the outer element.

height: auto;
overflow-y: hidden;

And the change on the inner element

       max-height: 400px;
       width: 100%;
       overflow-y: auto;

The result is attached:

I want to see more solutions, though.

 .outer { width: 400px; background-color: antiquewhite; height: auto; overflow-y: hidden; } h2 { margin-bottom: 500px; }.inner { max-height: 400px; width: 100%; overflow-y: auto; background-color: aquamarine; }

 <div class="outer"> <div class="inner"> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> <h2>sddssd</h2> </div> </div>