How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

Question

How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width. Check this Jsfiddle http://jsfiddle.net/xdKrF/34/ You will see that the green background stops at 1 point(at default width size). I would like to make the div with the green background expand to the whole scrollable div.

Important requirement, TEXT must never be altered and must stay in 1 line.

Does anyone have a simple solution to this? Complex/hacky solution I can think of is scrollable will have 1000% width and when its not scrollable it would be default/100%. Using @media.

HTML

<div id="container" style="overflow:auto">
<div id="content">
    Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>  

CSS

#content{
white-space:nowrap;
background:green;
}

Answer 1

May be there is will be better answer, but it's working. Just add display:table; to #container http://jsfiddle.net/xdKrF/36/

Answer 2

OK, I have found a solution.

Wrap a container and apply float:left; for it.

http://jsfiddle.net/2ugbkb6r/

Answer 3

Here is the code: ( JS Fiddle )

 #content{ white-space:nowrap; background:green; } #container { margin: 0 auto; width: 90%; overflow: auto; word-wrap: break-word; } 

 <div id="container"> <div id="content"> Well hello </div> <p> TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT </p> </div>