Как заставить div растягиваться, чтобы соответствовать его содержимому, а не делать полосы прокрутки?

Question

В моем приложении была таблица, которая могла расти до смешных высот, поэтому я добавил обертку div вокруг нее и установил overflow-y: auto, чтобы получить полосы прокрутки.Это, к сожалению, остановило div от растягивания его ширины.Теперь у него есть полосы прокрутки для высоты и ширины.Установка overflow-x: visible даже не влияет на результат.Мне нужно растянуть ширину, так как содержимое имеет переменную ширину.

Fiddle, чтобы проиллюстрировать проблему: http://jsfiddle.net/SG8T9/3

Спасибо за любую помощь

Answer 1

Я не уверен, что это то, что вы имеете в виду, но посмотрите здесь http://www.brunildo.org/test/Overflowxy2.html

с этой страницы:

Согласно спецификации ... некоторые комбинации с «видимым» невозможны: если одно указано как «видимое», а другое - «прокрутка» или «авто», тогда «видимое» устанавливается на «авто» ....

поэтому overflow-x: visible становится overflow-x: auto.

возможно, вы можете сделать контейнер достаточно широким, чтобы вместить содержимое, чтобы он не переполнялся.

Answer 2

Вы не должны определять ширину для вашего div, в противном случае он не будет превышать эту ширину независимо от значения параметра overflow-x. Вместо этого используйте min-width и max-width для установки значений расширения, тогда overflow-x:visible; должно работать нормально.

Вот скрипка: http://jsfiddle.net/shanethehat/SG8T9/

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