position sticky doesnt apply to flex child though i use top - html

Question

im trying to build a ui with html.
The navbar should stay at the top
Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.
issues :
the sticky nav box scrolls up after some scrolling and
the sky blue box doesn't stop below nav box.
please see the codepen and help me out....
html
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
position: relative;
top: 400px;
border-top: 4px solid black;
}
.box1 {
/* height:500px; */
position: sticky;
top: 50px;
width: 40%;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1000;
height: 50px;
}
.image-con {
position: fixed;
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
z-index: -1000;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
https://codepen.io/mbs-yaswanth/pen/yZOLXQ

Answer 1

Remove
body,html{
height: 100%;
}
Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps.
EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps
body,
html {
width: 100%;
margin: 0;
}
.box1 {
height:500px;
position: sticky;
top: 50px;
width: 39%;
vertical-align: top;
display: inline-block;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
display: inline-block;
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1;
height: 50px;
}
.image-con {
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="box1"></div>
<div class="box2"></div>