Scrollable content inside of scrollable content

Question

I was wondering if I could put scrollable content inside of scrollable content. I have something like this:

 <div style="overflow-y: auto; padding: 10px"> <div layout="column"> <h3 style="margin: 5px">Header 1</h3> <h3 style="margin: 5px">Header 2</h3> </div> <div layout="column" layout-align="center center" style="height: 100%"> <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto"> <div layout="column" style="width: 100%"> This content could be any height but should start scrolling when it gets larger than parent div </div> </div> </div> </div> 

So far I can only get the outer div to scroll. Is there a way to get both scrollable (without setting a specific pixel height)?

Answer 1

If the parent container will have 100% height - you will not have any scrollbar, and if it's child-element will have 70% if it's parent - the same goes there.

If you make the parent container a fixed height, you will have them both scrolled:

 <div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 500px;"> <div layout="column"> <h3 style="margin: 5px">Header 1</h3> <h3 style="margin: 5px">Header 2</h3> </div> <div layout="column" layout-align="center center" style="height: 100%"> <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;"> <div layout="column" style="width: 100%"> This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div </div> </div> </div> </div> 

If you don't want to use specific pixels you can use the vh instead (viewport-height)

 <div style="overflow-y: auto; padding: 10px; border: 1px solid red; height: 100vh;"> <div layout="column"> <h3 style="margin: 5px">Header 1</h3> <h3 style="margin: 5px">Header 2</h3> </div> <div layout="column" layout-align="center center" style="height: 100%"> <div layout="column" layout-align="center center" style="width: 70%; height: 100%; overflow-y: auto;border: 1px solid blue;"> <div layout="column" style="width: 100%"> This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div This content could be any height but should start scrolling when it gets larger than parent div </div> </div> </div> </div>