CSS overlay scrolling issues - html

Question

I posted a question here that was answered and worked for me at the time. I had to re-write my code with flex box and now the overlay scrolling doesn't work. I tried adding position:sticky; to the behind div that fixed it in the first question I posted, but doesn't work for my current code. Using my current code, how can I get the overlay scrolling to work again? What am I missing?
Edit:
using only css and html, is it possible to scroll away the front div (overlay div ontop of the image) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the front div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ .
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
}
#front {
background-color: pink;
height: 91%;
display: flex;
position: relative;
z-index: 2;
}
#left {
width: 50%;
background-color: lightgreen;
display: flex;
flex-direction: column;
}
#left>* {
flex: 1;
}
#leftnav {
height: 8%;
width: 100%;
background-color: green;
display: flex;
}
#logotext {
display: flex;
}
#right {
width: 50%;
background-color: lightgreen;
display: flex;
flex-direction: column;
}
#right>* {
flex: 1;
}
#logo {
width: 100%;
max-width: calc(80vh - 25px);
background-color: blue;
}
#logo:before {
content: "";
display: flex;
padding-top: 100%;
}
#llogo {
width: 100%;
max-width: calc(80vh - 25px);
background-color: lightblue;
margin: 0;
}
#llogo:before {
content: "";
display: flex;
padding-top: 100%;
}
#rightsidetop {
background-color: lightgrey;
}
#leftsidetop {
background-color: lightgrey;
}
ul {
display: flex;
text-align: center;
justify-content: space-between;
width: 85%;
text-decoration: none;
}
li {
display: block;
font-size: 17px;
text-decoration: none;
}
#rightsideright {
background-color: lightgreen;
flex: 1;
}
#leftsideright {
background-color: lightgreen;
flex: 1;
}
#rightsidebottom {
background-color: pink;
}
#leftsidebottom {
background-color: pink;
}
.wrapper {
display: flex;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100%;
margin-top: -100%;
position: sticky;
top: 0;
}
<div id="container">
<div id="front">
<div id="left">
<div id="leftsidetop">
<p>logo</p>
</div>
<div class="wrapper">
<div id="leftsideright"></div>
<div id="llogo"></div>
</div>
<div id="leftsidebottom"></div>
</div>
<div id="right">
<div id="rightsidetop">
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<div class="wrapper">
<div id="logo"></div>
<div id="rightsideright"></div>
</div>
<div id="rightsidebottom"></div>
</div>
</div>
</div>
<div class="video"></div>
<div style="height:150vh"> more content later </div>

Answer 1

just add to element you want to be scrollable an overflow: auto;
e.g :
#right {
overflow: auto;
}