html div overflow,css - HTML Div Width with Overflow: Auto? - Stack Overflow

Attempt 1

Add to the div,

white-space: nowrap;

The problem with this was the vertical scrollbar that appears impedes on the content slightly introducing a small unnecessary horizontal scrollbar.

Attempt 2

Add to the div,

white-space: nowrap;

padding-right: 1.5em; // increase as appropriate

The problem here is that you're guessing the size of the vertical scrollbar to remove the horizontal one.

Attempt 3

Add to the div,

white-space: nowrap;

overflow-x: hidden;

overflow-y: scroll;

Now, the horizontal scrollbar is removed, and the size of the vertical one is not being guessed, but it is always visible.

Attempt 4

The problem seems to boil down to needing to reserve the space for a scrollbar, as overflow-y: scroll; does but without it always being visible. The first solution that came to mind was to add an extra div alongside the first that has overflow-y: scroll; set and a width: 100%;. The problem was that with a regular div the scrollbar is included in the width. After some trial and error though, it seems that if you use a float it isn't. So by using an extra float you can force the width of the container to be larger by a scrollbars width, and then setting width: 100%; on the original div, it will take up the extra space too. You hide the extra float by setting it's height to 0.

N.B. I'm not entirely sure why this works myself, and I've only tested on Firefox5 where it seems to work. I hope it's helpful for you. So,

Add,

below you're original div. Then,

.content {

float: left;

width: 100%;

overflow-y: auto;

max-height: 15em;

}

.hack {

float: left;

width: 100%;

overflow-y: scroll;

height: 0;

}