title: Only the main div to be with hidden overflow
body: <p>I am new to CSS and at the moment I am trying to learn more about it. My idea was to create one of those "One Page" websites. I created a main container with hidden overflow. However, I want to create more divs inside the main container which can be scrollable. At the bottom I will give a running sample of the code I written. </p>
  
  <p>If someone could help me or at least give me some suggestions how to fix this problem I will be really grateful. </p>
  
  <p>Thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var PageOne = $(".PageOne").offset().top;
  var PageTwo = $(".PageTwo").offset().top;
  
  $(".Link1").click(function() {
      $('.Container').animate({
          scrollTop: PageOne},
          'slow');
  });
  
  $(".Link2").click(function() {
      $('.Container').animate({
          scrollTop: PageTwo},
          'slow');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    margin:0;
    padding:0;
  }
  
  .Nav{
    position:relative;
    width:10%;
    height:100vh;
    background-color:red;
    float:left;
  }
  
  .Link1, .Link2{
    position:relative;
    margin-bottom:2vw;
    color:#FFF;
    font-size:3vw;
    text-align:center;
  }
  
  .Container{
    position:relative;
    width:90%;
    height:100vh;
    overflow:hidden;
    background-color:green;
    float:left;
  }
  
  .PageOne{
    position:relative;
    width:100%;
    height:100vh;
    background-color:gold;
  }
  
  .PageTwo{
    position:relative;
    width:100%;
    min-height:100vh;
    background-color:purple;
    overflow:scroll;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="Nav"&gt;
    &lt;div class="Link1"&gt;
      Page 1
    &lt;/div&gt;
    &lt;div class="Link2"&gt;
      Page 2
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="Container"&gt;
    &lt;div class="PageOne"&gt;
      Page One
    &lt;/div&gt;
    &lt;div class="PageTwo"&gt;
      Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;Page Two&lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>