Фон div внутри другого с "пробелом: nowrap;" не покрывает всю ширину

Question

Хорошо, у меня есть проблема там. Короче, вот скрипка. Я повторюсь здесь:

HTML:

<div class="container">
        <div class="selected">
            <span>Why don't you cover all the width!?</span>
        </div>
        <div>
            <span>Little content</span>
        </div>
</div>

CSS:

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
}

Первый вопрос: почему не внутренний divфон покрывает весь span? Второй: я бы хотел исправить, конечно.

И еще одна вещь: HTML-элементы генерируются сторонним инструментом, к которому у меня нет доступа, что делает невозможным "оборачивать все это в другой div". Только CSS, только хардкор!

ОБНОВИТЬ:

Кстати, сам контейнер изменяемого размера (frame внутри frameset точнее).

РЕДАКТИРОВАТЬ:

Я обновил скрипку, чтобы предоставить больше информации. Проблема в том, что когда второй div будет выбран, я бы хотел, чтобы красный фон растянулся до ширины самой длинной линии.

ОБНОВЛЕНИЕ 2:

Описанная выше проблема может быть решена с помощью display: table-row; (см. здесь). Хитрость заключается в том, чтобы заставить это работать, даже если контент менее широкий, чем сам контейнер ( скрипка).

Answer 1

Дивы есть width:auto по умолчанию. Таким образом, внутренний div имеет ширину 100px, как и внешний. Диапазон переполняется из div.

В данном конкретном случае самым простым решением является отображение внутреннего элемента div:inline-block

div div {display:inline-block}

так что он больше не умещается в своем родителе, а формируется под ширину его содержимого.

Обновленная скрипка.

Изменить: чтобы ответить на ваш второй вопрос: да, дисплей: встроенный блок останавливает selected div от ширины контейнера.
К счастью, это можно исправить, добавив

min-width:100%;

в дополнение к дисплею: ​​встроенный блок. Смотрите более обновленную скрипку.

Другое редактирование:
И вопрос постоянно меняется. Теперь речь идет о кадрах в наборе кадров. Ну что ж.
Вот последняя скрипка, которая решает проблему, сформулированную сейчас. Но давайте посмотрим, какие изменения ожидает будущее...

Answer 2

Я думаю, что вам просто нужно применить цвет фона к диапазону вместо div.

http://jsfiddle.net/M294p/8/

HTML:

<div class="container">
    <div class="selected">
        <span>Why don't you cover all the width!?</span>
    </div>
    <div>
        <span>Little content</span>
    </div>
</div>

CSS:

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
    display:inline-block;
}

Answer 3

Ответ на ваш первый вопрос заключается в том, что у вас есть явная ширина родительского div. Вы можете подать заявку display: inline-block для внутреннего div и удалить width: 100px от родителя.

HTML

<div>
    <div class="test">
        <span>Why don't you cover all the width!?</span>
    </div>
</div>

CSS

.test {
     background: red;
    display: inline-block;
}

Пример: http://jsfiddle.net/M294p/6/