title: Sidebar which can scroll but with the main content fixed
body: <p>I am attempting to create a sidebar which can scroll, but the main content on the right is fixed (no scroll).</p>
  
  <p>But when I try to work around it does not work, so here is an example</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="outer-wrapper" class="is-open"&gt;
          &lt;div id="inner-wrapper"&gt;
          &lt;/div&gt;
          &lt;div id="sidebar"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sidebar {
      height: 100%;
      position: absolute;
      top: 0;
      left: -80%;
      width: 80%;
  }
  
  .is-open {
      //expose the sidebar by translating the wrapper
      -webkit-transform: translateX(80%);
      transform: translateX(80%);
  }
  
  #container {
      //disables horizontal scroll
      overflow: hidden;
  }
  </code></pre>
  
  <p>Here is the fiddle that might help with testing
  <a href="https://jsfiddle.net/minheq/tn2no1o6/3/" rel="nofollow">https://jsfiddle.net/minheq/tn2no1o6/3/</a></p>
  
  <p>Please, any advice on this?</p>