title: How to stop scrolling div which is longer than window height?
body: <p>Inside of #container (position:relative) I have 2 divs: both are 50% wide, the #first one is very tall (position:relative) and the #second one is at least 2000px tall. </p>
  
  <p>Is there any way to make #second stop scrolling when it's bottom reached, but keep scrolling the other content? Would be great without making extra parent div for it.
  Fiddle: <a href="https://jsfiddle.net/Moor/ha4zybpb/" rel="nofollow noreferrer">https://jsfiddle.net/Moor/ha4zybpb/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
      position:relative;
  }
  #first{
      width:50%;
      background:#333;
      height:10000px;
  }
  #second{
      position:absolute;
      right:0;
      top:0;
      width:50%;
      height:2000px;
      background:limegreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div id="first"&gt;&lt;/div&gt;
      &lt;div id="second"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>