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).
See Question&Answers more detail:os