Background of a div inside another one with "white-space: nowrap;" does not cover all the width

Question

Ok, I've got a problem out there. To be short, here's a fiddle. I'll repeat myself here:

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;
}

The first question is: why does not the inner div's background cover the entire span? The second one: I'd like to have a fix, of course.

And one more thing: the html elements are generated by a third-party tool, to which I have no access, which makes "wrapping it all in another div" thing impossible. Only CSS, only hardcore!

UPDATE:

By the way, the container is itself resizable (a frame inside a frameset to be precise).

EDIT:

I've updated the fiddle in order to provide more info. The problem is, that when the second div will be selected, I'd like the red background to stretch to the width of the longest line.

UPDATE 2:

The above described problem can be solved with display: table-row; (see here). The tricky thing is to make this work even if content is less wide than the container itself (a fiddle).

Answer 1

Divs have width:auto by default. So the inner div is 100px wide, like the outer one. The span overflows out of the div.

In this particular case, the easiest solution is to give the inner div display:inline-block

div div {display:inline-block}

so that it no longer fits itself in its parent, but it moulds itself to the width of its contents.

Updated fiddle.

Edit: to answer your second question: yes, the display:inline-block stops the selected div from being as wide as the container.
Fortunately, that can be corrected by adding

min-width:100%;

in addition to the display:inline-block. See more updated fiddle.

Another edit:
And the question keeps changing. Now it's about frames in a frameset. Oh well.
Here is the latest fiddle that solves the problem as formulated now. But let's see what changes the future has in store...

Answer 2

I think you just need to apply the background color to the span instead of the 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

The answer to your first question is because you have explicit width to the parent div. You can apply display: inline-block to inner div and remove the width: 100px from the parent.

HTML

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

CSS

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

An example : http://jsfiddle.net/M294p/6/