Как я могу включить ширину "переполнения: авто;"полосы прокрутки в динамическом размере абсолютного div?

Question

(Первый вопрос о переполнении стека. Надеюсь, я все делаю правильно.)

Я пытаюсь создать плавающее меню, которое наследует его ширину от содержимого (так как я не знаю ширинузаранее, т.е. загружается с URL).Я могу сделать это, установив div меню абсолютно без установки ширины или высоты.

Проблема возникает, когда содержимое достаточно высокое и требует прокрутки.Я установил "переполнение: авто;"так что его можно прокручивать вертикально, но новая полоса прокрутки не делает div более широким.Вместо этого div остается той же ширины, и полоса прокрутки вмещается в свой ранее красивый размер, заставляя содержимое переноситься.

Пример: http://jsfiddle.net/w7Mm8/

В примере: в Firefox,«пять» переносится на следующую строку, но в Chrome (по крайней мере для Mac) все это отображается в одной строке.

Любой элегантный способ сделать это без явной установки ширины меню, чтобы включитьширина полосы прокрутки?

СПАСИБО!

Answer 1

У вас есть несколько вариантов.

Используйте white-space:nowrap; и некоторые padding.

Используйте overflow: scroll;, который добавляет дополнительную полосу прокрутки внизу, но устраняет проблему с переносом в Firefox.

Используйте overflow-y:scroll, который является CSS3 и поддерживается только современными браузерами.

Answer 2

Случайно я наткнулся на это.Установка 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/ там, где оно не работает.