Css: overflow: auto, + заданная ширина

Question

[winbackgo]

Речь идет о таком контейнере:
jsfiddle.net/5VCfm/2/embedded/result/
Если задать ширину элемента внутри контейнера то он вылетает за края родителя создавая при этом горизонтальную прокрутку. Что самое характерное так себя ведет в мозиле и в хроме. А вот опера и осел отображают все правильно.
Как решить проблему?

Answer 1

[nick4fake]

Мне кажется, вы нашли баг. У меня в хроме дико плющит нижнюю полосу прокрутки.

Comments

[winbackgo]

Да я вообще считаю это багом как в хроме так и в мозиле так как я не вижу никакой логики такому поведению. ИЕ и опера все правильно показывают.

Answer 2

[Anarchy]

jsfiddle.net/5VCfm/3/
Задайте размеры родительского блока или как вариант overflow-x: hidden

Comments

[nick4fake]

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

[Anarchy]

C overflow — согласен ) А вот размеры блоков задавать желательно в любом случае если они не резиновые.

[nick4fake]

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

[Anarchy]

То есть? Вроде выглядит как и верхний блок

[winbackgo]

Ширина должна зависеть от размера контента. Т.е. задать ширину не вариант.

[Anarchy]

у него там в маленьком блоке ширина прямо в HTML прописана style="width:300px"
Для резины я писал выше, что это не вариант.

[nick4fake]

Насколько я понимаю, ширина задана для примера. Даже если она нужна — то только для потомка, дублировать ее ни к чему.

[winbackgo]

Ну да, для примера я написал (style="width:300px"). Это может быть и 300 и любая другая. Скажем это модальное окно, в нем открывается форма, так вот эта форма в модалке не должна превышать 700px, или скажем контейнер контента не должен превышать 900px. В любом случае используя width, max-width, min-width проблема присутствует.

[Петруша Укропов]

Хмм… у меня при указании style="max-width: 300px;" работает правильно

[winbackgo]

Да, это так но не достигается цель. Вот пример для наглядности: jsfiddle.net/GNfSK/
Дело в том что ширину задает контент, если там текст то проблема решается при помощи max-width но вот если это контейнер который имеет точную ширину, то нет.

Answer 3

[Malyw]

Добавить:
.content-wrap { float:left; }
jsfiddle.net/5VCfm/4/

Comments

[winbackgo]

Что-то я не вижу эффекта.

[winbackgo]

Точнее эффект есть но теперь оба контейнера уходят в никуда.