fgysin fgysin - 29 days ago 14
CSS Question

Vertical Scrollbar leads to horizontal scrollbar

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

Answer

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.