title: I hid the scrolling bar (but it should exist) and now I can't scroll
body: <p>Sorry for the almost comic title, I wasn't able to explain the problem in a better way.</p>
  
  <p>I thought I had finished my menu <a href="http://www.jcml.pt/2" rel="nofollow">http://www.jcml.pt/2</a> but then I noticed that in some browsers (firefox, IE) the "hidden" scrollbar would still display and mess up my menu. In Chrome and Android everything would work as intended.</p>
  
  <p>I opened a question and was later able to fix that problem by creating an extra container div and changing the code to <a href="http://www.jcml.pt/3" rel="nofollow">http://www.jcml.pt/3</a> (adding extra container divs)</p>
  
  <p>But even being hidden the scrolling should be possible but it does not work.
  Edit: You might need to reduce the height of the window to see that in version2 you can scroll but in version3 you can't)</p>
  
  <p>Please let me know if there's need for more details, to highlight parts of the code here or a better explanation of the issue.
  When I'm less burned out from hours looking at this I can also try to create a fiddle with a simplified version of the site if need be.</p>
  
  <p><strong>Edit:</strong> Here's a fiddle so it's easier to see the code and where I removed part of the navigation that doesn't interfere whit this situation. <a href="http://jsfiddle.net/jcml/pyoqauLr/" rel="nofollow">http://jsfiddle.net/jcml/pyoqauLr/</a></p>
  
  <p>Most relevant part of the code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      overflow: hidden;
      position: relative;
  }
  
  .menu {
      overflow: hidden;
      position: fixed;
      height: 100%;
      width: 100%;
  
  .m1 {
      right: 0;
      top: 0;
      margin-top: 0;
      margin-right: 0;
  }
  
  .outer-container {
      height: 100%;
      position: relative;
      overflow: hidden;
      width: 100%;
  }
  
  .inner-container {
      display: table;
      height: 100%;
      position: fixed;
      overflow-x: hidden;
      overflow-y: scroll;
      width: 100%;
  }
  
  .inner-container::-webkit-scrollbar {
      display: none;
  }
  
  .links {
      height: 100%;
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="menu m1 corner"&gt;
      &lt;div class="outer-container"&gt;
          &lt;div class="inner-container"&gt;
              &lt;div class="links"&gt;
  </code></pre>