set width of inner div on scrollable element to 100% of scrollable width

Question

How do I get the width of this inner content div to be equal to the width of the scrollable area?

<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

with CSS:

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: nowrap;
}

jsFiddle: http://jsfiddle.net/XBVsR/12/

PROBLEM: if you scroll across you can see that the background does not go all the way across as it should.

I've tried setting width: 100%, overflow: visible, etc, to no avail.

EDIT: I've updated to make clear that I don't want the text to wrap - I want the horizontal scroll on the whole thing.

Answer 1

You can use display: table-row; for nested divs. Look at jsfiddle