title: Scrolling two divs isolated from another
body: <p>I have two divs inside a fixed position div. Is there a way to make it so that the two divs scroll isolate from another. Like the scrolling of one does not affect the other? I've used <code>overflow auto</code> on the children divs and <code>overflow hidden</code> on the parent div but that does not seem to work (the scrolling of one div seems to affect another)</p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent { 
      position: fixed;
      overflow:hidden;
      min-width: 800px 
      min-height: 400px;
      width: 100%;
      height: 100%;
  }
  
  .inner1 { 
      position: relative;
      overflow: auto;
      width: 50%;
      height: 100%;
  }
  
  .inner2 {
      position: relative;
      overflow: auto;
      width: 50%;
      height: 100%;
  }
  
  The inner1 and inner2 divs have to have a height of 100%.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="inner1"&gt;
    &lt;/div&gt;
    &lt;div class="inner2"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>