title: Can't get overflow scroll to work
body: <p>I want to be able to scroll within the page when the content collapses to the center-right (the content collapses/transforms upon clicking the sidebar label). I don't want there to be a main page scroll.</p>
  
  <p>Here's a codepen, but the positioning is off because of the interface size,
  <a href="http://codepen.io/anon/pen/XXKEpE" rel="nofollow">http://codepen.io/anon/pen/XXKEpE</a></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>  body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 600px;
      height: 600px;
      float: left;
      border: dotted 1px black;
      margin-left: 200px;
      background-color: green;
    }
    .page-content {
      position: relative;
      z-index: 1;
      background-color: pink;
      transition: .2s ease;
      transform: scale(1);
      transform-origin: right center;
      overflow: scroll;
      height: 100%;
    }
    .toggle {
      text-decoration: none;
      font-size: 30px;
      color: black;
      transition: .2s ease;
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 2;
    }
    .sidebar {
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      width: 120px;
      padding: 30px;
      background: #333;
      z-index: 0;
    }
    li {
      color: rgba(255, 255, 255, 0.8);
      font-family: sans-serif;
      font-size: 16px;
      margin-bottom: 16px;
      -webkit-font-smoothing: atialiased;
      cursor: pointer;
    }
    li:hover {
      color: rgba(255, 255, 255, 1);
    }
    #sidebartoggler {
      display: none;
    }
    #sidebartoggler:checked + .page-wrap .toggle {
      left: 200px;
    }
    #sidebartoggler:checked + .page-wrap .page-content {
      transform: scale(0.7);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;input type="checkbox" id="sidebartoggler" name=" " value="" /&gt;
  
    &lt;div class="page-wrap"&gt;
  
      &lt;label for="sidebartoggler" class="toggle"&gt;☰&lt;/label&gt;
  
      &lt;div class="page-content"&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="sidebar"&gt;
        &lt;ul&gt;
          &lt;li&gt;Home&lt;/li&gt;
          &lt;li&gt;Projects&lt;/li&gt;
          &lt;li&gt;Clients&lt;/li&gt;
          &lt;li&gt;Blog&lt;/li&gt;
          &lt;li&gt;Contact&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>