Почему дочерний элемент от элемента с overflow:scroll имеет размер родителя, а не контента?

Question

[Q2W]

Есть блок, у которого css-свойство overflow выставлено в scroll. У него есть вложенный блок, в у того есть контент, который не влезает в родительский. Появляется скроллинг. Но когда этот скроллинг мы скроллим, то с удивлением обнаруживаем, что вложенный блок уезжает в бок, хотя по логике он должен продолжаться дальше.

Вот демо: jsfiddle.net/#&togetherjs=JMkxEj403B

Вот код HTML:

<div class="c">
    <div class="d">
            CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC
    </div>
 </div>

Вот код CSS:

.c {outline: solid 1px green; overflow-x:scroll; height: 35px; white-space:nowrap;}
.d {background-color:gray;}

Что делать?

Answer 1

[Илья Шатохин]

Родительский у вас размером с экран, а не влазит контент, который находится во вложенном.
overflow-x:scroll; должен быть у вложенного блока, а не родительского.

Как вариант: "display: table;"

Comments

[Q2W]

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

[Илья Шатохин]

Q2W: скролится должен контент, который не уместился. Блочный элемент по умолчанию принимает размер родителя.

[Q2W]

Илья Шатохин: как сделать, чтобы мой блочный элемент .d принял размер своего содержимого?

[Q2W]

Хмм, сделал вложенный элемент неблочным - помогло. А вот inline-block, например, не помогало.

[Илья Шатохин]

Q2W: так вы уже сделали благодаря white-space:nowrap; теперь добавьте корректный overflow к нему :)

[Q2W]

Q2W: всё-таки хочется понять, как сделать с блочным вложенным блоком, а не с инлайновым.

[Илья Шатохин]

Q2W: я же сказал - правильно указать overflow :)

[Q2W]

Илья Шатохин: Ещё раз: overflow:scroll должен быть именно у родительского элемента, а дочерний должен прокручиваться. Таково условие задачи.

[Илья Шатохин]

Q2W: попробуйте display: table; дочернему.

[Q2W]

Илья Шатохин: Таблица помогла, спасибо.

[Илья Шатохин]

Q2W: тогда отметьте как решение. Спасибо.