<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">
    <div class="side">SiDe
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quam voluptas nesciunt, exercitationem tempore odio recusandae deleniti quo eveniet iure! Sequi debitis beatae consectetur ducimus magnam voluptatibus officia tempora autem.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quam voluptas nesciunt, exercitationem tempore odio recusandae deleniti quo eveniet iure! Sequi debitis beatae consectetur ducimus magnam voluptatibus officia tempora autem.</p>
    </div>
    <div class="page">PagE</div>
  </div>
  <footer class="main-footer">FOOTER</footer>
</main>

body{
  color:#fff; 
  font-family:arial; 
  font-weight:bold; 
  font-size:40px;
}
.main-container{
  max-width:800px;
  margin:0 auto;
  border:solid 10px green;                  padding:10px;
  margin-top:41px;
  // overflow: scroll;
}
.main-container *{
  padding:10px;
  background:#aaa; 
  border:dashed 5px #000;}
.main-container * + *{
  margin-top:20px;

}
.main-header{
  height:50px;
  background:#aaa;
  border-color:red;
}


.main-header{
  // position:sticky;
  // top:0px;
 }

.main-content{
  min-height:300vh;
  display: flex;
  border-color:blue;
  
  
}
.side{
  flex: 0 0 300px;
  max-height: 100vh;
   position:-webkit-sticky;
  position:sticky;
  top:30px;
  border-color: yellow;
  overflow-y: scroll;
  
  p{
    font-size: 25px;
  }
}

.page{
  flex: 1 1 auto;
}