title: Scrollbars not hiding
body: <p>I've recently stumbled upon a rather interesting behavior related to browser scrollbars. Here is the link to demonstrate this: <a href="http://jsfiddle.net/5L7tyswh/5/" rel="nofollow">http://jsfiddle.net/5L7tyswh/5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='container'&gt;
    &lt;div class='fix' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin: 0;
  }
  .container {
      position: absolute;
      overflow: auto;
      width: 100%;
      height: 100%;
      max-height: 400px;
      max-width: 400px;
  }
  
  .noscroll {
      overflow: hidden;
  }
  
  .fix {
      width: 400px;
      height: 400px;
      background-color: green;
  }
  </code></pre>
  
  <p>So the situation is basically this: I want a fixed sized div that is scrollable if the window becomes smaller than the minimum. I explicitly want the scrollbars to appear 'in the div' so I created a container that acts as the 'scrollpanel'. So far so good.</p>
  
  <p>The strangeness comes when you shrink the window small enough for the scrollbars to show up, then enlarge it again. What happens is that the scrollbars don't hide as they should (at least I think it would be logical). I don't know if it is a bug or a feature, but my tip is on the former. My only explanation to this is that the vertical and horizontal scrollbars prevent each other from disappearing.</p>
  
  <p>The workaround is the commented javascript, if you uncomment it the scrollbars behave as they meant to.</p>
  
  <p>Can anyone explain this better?</p>
  
  <h2>Update:</h2>
  
  <p>I can only reproduce it in Chrome so far. It works in IE11 and Firefox.</p>