Vertical Scrollbar leads to horizontal scrollbar

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.

I found a solution which is working but far from perfect:

I added a padding-right : 15px to my div, to automatically grow the entire div. Now if the vertical scrollbars appear, they fit within the padding so the horizontal width is still ok.

Regretfully the padding of course also shows up when no vertical scrolling is needed, making my div just a tiny bit wider than it would have to be... :/ Well, in my eyes this is still preferable to unneeded horizontal scrollbars.