Struggling to figure out how to make a parent div automatically scroll based on its child's content.
I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent.
This is the HTML for the menu wrapper.
<div class="menu-box">
<div class="page-links">
<div class="pl-inner">
<div class="pl-box">
<div class="pl-content">
<p>Menu content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
This is my CSS
.menu-box {
width: 100%;
min-height: 100%;
background-color: #000;
position: fixed;
z-index: 10;
transition: all 1.5s ease-in;
}
.page-links {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pl-inner {
position: relative;
width: 100%;
}
.pl-box {
position: relative;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
padding: 120px 50px 180px 50px;
overflow: hidden;
}
.pl-content {
width: 100%;
display: inline-block;
opacity: 1;
color: white;
}
You can see a working example here.
I thought adding overflow-y: auto to the parent element would automatically scroll the content, but it doesn't seem to work even when I resize the screen vertically. Where am I going wrong?