title: position sticky doesnt apply to flex child though i use top
body: <p>im trying to build a ui with html.</p>
  
  <ol>
  <li>The navbar should stay at the top </li>
  <li>Some video below the navbar and the other content should scroll on the video( for now it is brown box) .</li>
  <li>The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.</li>
  </ol>
  
  <p>issues :</p>
  
  <ol>
  <li>the sticky nav box scrolls up after some scrolling and </li>
  <li>the sky blue box doesn't stop below nav box. 
  please see the codepen and help me out....
  html</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;&lt;/div&gt;
  
  &lt;div class="image-con"&gt;&lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="box1"&gt;&lt;/div&gt;
    &lt;div class="box2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/mbs-yaswanth/pen/yZOLXQ" rel="nofollow noreferrer">https://codepen.io/mbs-yaswanth/pen/yZOLXQ</a></p>