Vertical Scrollbar leads to horizontal scrollbar
Solution 1
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.
Solution 2
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.
Solution 3
Often setting 100vw
is the problem. Just remove it and your width will be 100%, which will be what you want anyways.
Related videos on Youtube
fgysin
Updated on April 12, 2022Comments
-
fgysin about 2 years
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 a fixed maximum though: as soon as this value is reached vertical scrollbars appear. This works all pretty swell.
Now the issue:
When the vertical scrollbar appears, it uses up around 10px of horizontal space, as the scrollbar will be placed inside thediv
.
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 thewidth:auto
setting), thediv
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).
-
Bojangles over 11 yearsTry using
overflow-y: auto
instead. This will only put scrollbars vertically.
- How can I avoid having these horizontal scrollbars and just autoscale the width of the
-
Spencer about 9 yearsJust noticed this is 2 years old - hope it's useful to someone anyway!
-
Michael Scheper almost 9 yearsThe trouble is, 15px is not a cross-platform magic number. Some of your users will likely have very fat scrollbars, for accessibility reasons. To be really safe, unfortunately, you'll have to resort to JavaScript to find out how wide scrollbars are.
-
fgysin almost 9 yearsYou're right... This problem really sums up everything that is wrong with the internet. :/
-
Michael Scheper almost 9 years... well, with CSS3, anyhow. Maybe CSS4 will have ways to access more system data, in addition to the system colours that were introduced in CSS2.
-
OsakaWebbie over 8 years@Michael: Do you know what Javascript (or jQuery) trick one could use to find out whether there is a scrollbar and how wide it is, so the div can be widened appropriately?
-
Michael Scheper over 8 years@OsakaWebbie: It's been a while since I've had to do it, but what's worked for me are pretty much along the same lines as what's described on these pages: chris-spittles.co.uk/jquery-calculate-scrollbar-width stackoverflow.com/questions/986937/…
-
Rusty Rob over 6 yearsadding width: 100% to all my child divs removed the scroll bar :)
-
J Mor about 5 yearsThis not only fixed the problem, it gave me much more understanding into how the problem originally arose.
-
BrunoElo almost 3 yearsI tried out @robertking's idea then removed them gradually to know the one I really needed to apply
width: 100%
on. Thanks guys! -
insaner over 2 yearsYup. Firefox bug. In my case, it is triggered when I have
overflow: auto
in the container div of a table that has a column withwhite-space: nowrap;
. I have multiple tables with this, and only some of them have the horizontal scrollbar that ruins the layout. So the padding-right solution wouldn't work for me