Ширина CSS 100%, включая переполнение

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

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

Я создал jsFiddle, в котором показан упрощенный пример того, что я пытаюсь объяснить.

Я хотел бы, чтобы ширина содержащегося элемента соответствовала ширине переполненного содержимого. В jsFiddle это означает, что красный фон не будет срезан на полпути.

Спасибо.

div
{
    border: 1px solid black;
    margin: 33% auto;
    overflow: scroll;
    white-space: nowrap;
    width: 100px;
}

div > ol
{
   background: red;
   width: 100%;
}

Ответы

Ответ 1

Просто используйте display: inline-block. Вы можете прочитать больше в спецификациях W3C.

Замените width:100% на display:inline-block в этих двух стилях элементов.