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

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.