Scrolling a div inside an absolute positioned parent
I have an absolute positioned div and inside I have another div with content larger than that of the parent. I need a child div to have vertical scrolling, but my attempts are not working. I need to do this without js. This is my code:
HTML:
<div class="container">
<div class="allow-scroll">
---CONTENT---
</div>
</div>
CSS
.container{
background: red;
position: absolute;
top:0;
left:0;
right: 50%;
bottom: 50%;
overflow: hidden;
}
.allow-scroll{
overflow-y: scroll;
position: relative;
height: 100%:
}
And fiddle: https://jsfiddle.net/zasnj08z/
+3
source to share
2 answers
This is because you have an overflow: hidden on the parent
just change it to
overflow: scroll
See your fiddle here - https://jsfiddle.net/zasnj08z/3/
Also, you don't need overflow scrolling for the child, as this is the parent container you want to scroll. This is also changed in the violin.
+3
source to share