title: Vertical Scrollbar leads to horizontal scrollbar
body: <p>My CSS looks like this:</p>
  <pre><code>div.SOMECLASS {
    position: absolute;
    max-height: 300px
    height: auto;
    width: auto;
    overflow: auto;
    ...
  }
  </code></pre>
  <p>The div <em>height</em> and <em>width</em> scale automatically. The height has a fixed maximum though: as soon as this value is reached vertical scrollbars appear. This works all pretty swell.</p>
  <p>Now the issue:<br />
  When the vertical scrollbar appears, it uses up around 10px of <em>horizontal space</em>, as the scrollbar will be placed <em>inside</em> the <code>div</code>.<br />
  However, the width is <em>not</em> autoscaled to allow for these additional 10-something pixels used up by the vertical scrollbars. As the horizontal width <em>before</em> the adding the vertical scrollbars was <em>just exactly right</em> for the content (as expected from the <code>width:auto</code> setting), the <code>div</code> now <strong>also</strong> displays horizontal scrollbars - to allow for the missing 10 pixels. This is silly.</p>
  <ul>
  <li>How can I avoid having these horizontal scrollbars and just autoscale the width of the <code>div</code> to make the vertical scrollbars fit?</li>
  </ul>
  <p>If possible I am looking for a solution which does not rely on just completely disabling horizontal scrolling, as this will probably be needed at some point (i.e. for certain inputs).</p>