如何包含“overflow: auto”的宽度动态大小的绝对 div 中的滚动条？
（关于 Stack Overflow 的第一个问题。希望我做得对。）
我正在尝试创建一个浮动菜单，该菜单从其内容继承其宽度（因为我事先不知道宽度，即从 URL 加载） 。我可以通过让菜单 div 绝对定位而不设置宽度或高度来做到这一点。
当内容足够高需要滚动时就会出现问题。我设置“溢出：自动；”这样它就可以垂直滚动，但新的滚动条不会使 div 变宽。相反，div 保持相同的宽度，并且滚动条突出到之前大小合适的内容中，强制内容换行。
示例： http://jsfiddle.net/w7Mm8/
在示例中：在 Firefox 中，“五”被换行到下一行，但在 Chrome 中（至少对于 Mac），它全部显示在一行中。
有什么优雅的方法可以在不显式设置菜单宽度以包括滚动条宽度的情况下执行此操作吗？
谢谢！
(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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你有几个选择。
使用
white-space:nowrap;和一些填充.使用
overflow:scroll;，在底部添加一个额外的滚动条，但修复了 Firefox 中的换行问题。使用
overflow-y:scroll，它是 CSS3，仅受现代支持浏览器。You have a few options.
Use
white-space:nowrap;and somepadding.Use
overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox.Use
overflow-y:scrollwhich is CSS3 and is supported by only modern browsers.一次偶然的机会，我偶然发现了这一点。设置
white-space: normal实际上使 Firefox 将滚动条推到了外面。请参阅http://jsfiddle.net/w7Mm8/36/。编辑：等等...不只有五个（之前的小提琴有六个单词）：http://jsfiddle.net/w7Mm8/37/。不知何故，额外的单词导致了它的行为。
Edit2：基于上面奇怪的观察（
white-space: normal实际上与它没有任何关系，它是额外的单词），有一个奇怪的现象“解决方法”可能对某些人有用（但对其他人来说却很痛苦）。请参阅（五个字）http://jsfiddle.net/w7Mm8/49/，（六个字） http://jsfiddle.net/w7Mm8/57/。content必须设置为 3 个字符，并且不能是空格（根据我的实验）。 注意：伪元素必须位于文本内容所在的位置，无论深度如何，请参阅：http://jsfiddle.net/w7Mm8/58/ 它不起作用。By chance I stumbled on this. Setting
white-space: normalactually 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: normaldid 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/. Thecontentmust 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.