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

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

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

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

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

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

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

СПАСИБО!

Ответ 1

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

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

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

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

Ответ 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/ где он не работает.