Css – Vertical Scrollbar leads to horizontal scrollbar

csshorizontal-scrollingscrollbarvertical-scrolling

My CSS looks like this:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

The div height and width scale automatically. The height has fixed a maximum though: as soon as this value is reached vertical scrollbars appear. This works all pretty swell.

Now the issue:
If the vertical scrollbars appear, they use up around 10px of horizontal space, as the scrollbars will be placed inside the div.
However, the width is not autoscaled to allow for these additional 10-something pixels used up by the vertical scrollbars. As the horizontal width before the adding the vertical scrollbars was just exactly right for the content (as expected from the width:auto setting), the div now also displays horizontal scrollbars – to allow for the missing 10 pixels. This is silly.

  • How can I avoid having these horizontal scrollbars and just autoscale the width of the div to make the vertical scrollbars fit?

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).

Best Answer

Just figured out a pretty passable solution (at least for my version of this problem).

I assume the issue with width: auto is that it behaves similarly to width: 100vw; the problem is that when the vertical scrollbar appears, the viewport width remains the same (despite the ~10px scrollbar), but the viewable area (as I'm calling it) is reduced by 10px.

Apparently defining width by percentage defines it in terms of this "viewable area", so changing your code to:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

should allow the content to rescale properly!

p.s. You can also instead add overflow-x: hidden, which will stop the horizontal scrollbar from appearing, instead simply cutting ~10px off of the right side of your div when the vertical scrollbar appears.

Related Topic