title: Content shows scrollbar but is not scrollable
body: <p>I wan't the content to scroll up but it should never be visible behind the menu.
  Which is hard cause it's transparant. So I use a div to use it as a mask.
  But for some reason that doesn't allow for my content to scroll.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="title"&gt;
      title
  &lt;/div&gt;
  &lt;div class="menu"&gt;
      menu
      &lt;button class="btn"&gt;Foo&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="content-mask"&gt;
    &lt;div class="asfsadf"&gt;
      scroll content&lt;br/&gt;
      scroll content&lt;br/&gt;
      scroll content&lt;br/&gt;
      scroll content&lt;br/&gt;
      scroll content&lt;br/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.title {
     position: fixed; 
     top: 0;
  }
  .menu {
     position: fixed; 
     top: 20px;
     border: 1px solid black;
  }
  .content-mask {
     position: fixed; 
     top: 40px;
     overflow: scroll;
  }
  .content {
  }
  body {
     background-image:  url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large");
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/clankill3r/34Lf1mke/" rel="nofollow">https://jsfiddle.net/clankill3r/34Lf1mke/</a></p>