Scroll parent div with scrollable child that has content to scroll

teebo 0
Viewed 36

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.

UPDATE

My answer below does not take into account that for some use cases the child element does not have to be 100% width of the parent element.

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>

javascript css html
1 Answers

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

With the child element 100% of the parent's width.

  .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>

teebo0
Related