title: Two divs scrolling independently
body: <p><br>
  I need help to make these two <code>&lt;div&gt;</code>'s  (<code>#side-nav</code> and <code>#content-wrapper</code>) to scroll independently,<br></p>
  
  <h1>HTML:</h1>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="top-nav"&gt;
          Top nav
      &lt;/div&gt;
      &lt;div id="side-nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;Thing&lt;/li&gt;
              &lt;li&gt;Thing&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="content-wrapper"&gt;
          &lt;!-- Ton of conent here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>#wrapper {
    width: 100%;
    background-color: #fff;
  }
  
  #top-nav {
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    background-color: green;
  }
  
  #side-nav {
    position: fixed;
    width: 250px;
    height:100vh;
    overflow-y: scroll;
    background-color: red;
  }
  
  #content-wrapper {
    margin: 60px 0 0 250px;
    padding: 0 30px;
    overflow-y: scroll;
    background-color: blue;
  }
  </code></pre>
  
  <p>now if I scroll the <code>#side-nav</code> to the end or top, <code>#content-wrapper</code> will scroll too. <code>#side-nav</code> has to stay full-page height and fixed even if there is not that many <code>&lt;li&gt;</code>'s.</p>
  
  <p>I've quickly made pen here:</p>
  
  <p><a href="http://codepen.io/blizqery/pen/QbZzRN" rel="noreferrer">http://codepen.io/blizqery/pen/QbZzRN</a></p>
  
  <p>Thanks!</p>