Scrolling two divs isolated from another
<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>