Auto Scroll Div Based on Content - html

Question

I can't work out how to make a parent div auto scrollable based on it's childs content.
I've got a menu that expands on click event and need it to scroll if the childs height exceeds the parent's.
This is my 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;
}
I have a working example https://codepen.io/eddywoods/pen/bGvopmL
I thought if I added overflow-y: auto to the parent element it would auto scroll the content but even when I shrink the screen vertically is doesn't want to auto scroll. Where am I going wrong?

Answer 1

Here at line 12 in css.
body {
overflow-y: hidden !important; // This needs to be auto so that your body can scroll
overflow-x: hidden;
}
you have set the overflow-y of body to hidden. So, your body isn't scrollable. and that's causing the issue.

Answer 2

Do you mean like this?? Take a look at it in full screen and let me know.
$('.burger-wrapper').on('mousedown' , function(){
$('.content-wrapper').toggleClass('show');
});
html, body {
margin: 0;
padding: 0;
background-color: rgba(244, 244, 244, 0.9);
width: 100%;
height: 100%;
}
body {
overflow-y: scroll ;
overflow-x: hidden;
position: relative
}
div {
display: block;
}
.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;
}
.plink {
font-size: 100px;
font-weight: 800;
color: #f4f4f4;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-bottom: 5px;
letter-spacing: -3px;
text-align: left;
text-align: -webkit-left;
display: block;
}
.pspacer {
width: 100%;
height: 10px;
}
/* ---------------------------------------------------------*/
.burger-wrapper {
position: fixed;
top: 41px;
right: 41px;
width: auto;
height: auto;
padding: 5px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
z-index: 99;
}
.content-wrapper {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
transition: all 1s cubic-bezier(.36, .17, .06, 1.02);
z-index: 40;
background-color: rgba(244, 244, 244, 1.0);
}
.show {
top: 90%;
}
.logo-wrapper {
position: fixed;
top: 41px;
left: 41px;
font-size: 17px;
font-weight: 900;
letter-spacing: 0px;
text-transform: uppercase;
color: rgba(204, 204, 204, 0.9) !important;
z-index: 99;
width: 150px;
height: 12px;
/*background-color: #333;*/
background-color: rgba(228, 228, 228, 0.9);
}
.container {
position: absolute;
top: 0px;
left: 0px;
bottom: 20px;
width: 100%;
height: 100%;
}
.block {
width: 100%;
height: 80px;
background-color: rgba(244, 244, 244, 0.9);
position: absolute;
z-index: 89;
}
.grid-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.thumb-grid {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
padding: 130px 5% 150px 5%;
}
.box {
width: 100%;
height: 200px;
background-color: #333; ;
}
.box:nth-child(even) {
background-color: #999;
}
#media (max-width: 650px){
.plink {
font-size: 56px;
text-align: -webkit-center;
text-align: center;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div> <!-- .menu-box end div -->
<div class="logo-wrapper"></div>
<div class="burger-wrapper">click</div>
<div class="content-wrapper">
<div class="container">
<div class="block"></div>
<div class="grid-wrapper">
<div class="thumb-grid">
<p>MAIN PAGE content goes here......Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam eget urna et consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales molestie odio a maximus. Pellentesque sit amet augue a leo sollicitudin hendrerit sit amet vel ligula. Nullam placerat dapibus rhoncus. Etiam a nulla sit amet tellus ullamcorper sagittis et pellentesque sapien. Curabitur eu purus eu massa blandit mollis. Vestibulum venenatis faucibus tempus. Curabitur finibus metus ut ipsum semper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc orci sapien, eleifend a risus quis, accumsan aliquet quam. Cras dolor ex, fringilla quis egestas eget, finibus ut velit. Donec lacinia rutrum enim. Nunc at viverra metus, ac pharetra urna. Sed dui turpis, tincidunt quis sem mattis, consectetur sagittis augue. Aenean porttitor, eros vehicula dapibus egestas, dolor nibh venenatis libero, eu viverra arcu ipsum quis dolor. Ut enim odio, vestibulum eu elit vitae, blandit commodo risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas imperdiet ligula quis ornare ullamcorper. Fusce eu facilisis lectus. Duis ultricies rhoncus eros, eget facilisis dui pulvinar nec. Morbi posuere enim dolor, id finibus eros sagittis id. Cras accumsan lacus.</p>
</div>
</div>
</div> <!-- .container end div -->
</div> <!-- .content-wrapper end div -->

Answer 3

Ok so after a little trial and error I found the answer is to set the position of .page-linksto absolute
Literally no idea if this is a good way to laying stuff out but seems to work. I've updated the Code Pen here