(First question on Stack Overflow. Hope I'm doing it right.)
I'm trying to create a floating menu that inherits its width from its content (since I don't know the width in advance, i.e. loaded from a URL). I can do this by having the menu div absolutely positioned without setting a width or height.
The problem occurs when the content is tall enough to require scrolling. I set "overflow: auto;" so that it can be scrolled vertically, but the new scrollbar doesn't make the div wider. Instead, the div stays the same width, and the scrollbar juts into its previously nicely sized content, forcing the content to wrap.
Example: http://jsfiddle.net/w7Mm8/
In the example: in Firefox, "five" gets wrapped onto the next line, but in Chrome (for Mac at least), its all shown on one line.
Any elegant way to do this without explicitly setting the width of the menu to include the width of the scrollbar?
THANKS!
You have a few options.
Use white-space:nowrap; and some padding.
Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox.
Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.
By chance I stumbled on this. Setting white-space: normal actually made Firefox push the scroll bar outside. See http://jsfiddle.net/w7Mm8/36/.
Edit: Wait... not with only five (the previous fiddle had six words): http://jsfiddle.net/w7Mm8/37/. Somehow, the extra word caused it to behave.
Edit2: Based on the bizarre observation above (the white-space: normal did not really have anything to do with it, it was the extra word), there is a bizarre "workaround" that may prove useful to some people (and a pain for others). See (five words) http://jsfiddle.net/w7Mm8/49/, (six words) http://jsfiddle.net/w7Mm8/57/. The content must be set to 3 characters and cannot be spaces (from my experiments). Note: the pseudo element has to be where the text content is, however deep that is, see: http://jsfiddle.net/w7Mm8/58/ where it does not work.
来源：https://stackoverflow.com/questions/8409613/how-can-i-include-the-width-of-overflow-auto-scrollbars-in-a-dynamically-siz