Wie man die Breite von Div1 innerhalb einer scrollbaren Div2 zu Div2 Breite dynamisch ändert

Question

Wie man die Breite von Div1 innerhalb einer scrollbaren Div2 zu Div2 Breite dynamisch ändert. Überprüfen Sie diese Jsfiddle http://jsfiddle.net/xdKrF/34/ Sie sehen, dass der grüne Hintergrund bei 1 Punkt (bei Standardbreite) stoppt. Ich möchte das div mit dem grünen Hintergrund auf das gesamte scrollbare div erweitern.

Wichtige Voraussetzung, TEXT darf nie verändert werden und muss in 1 Zeile bleiben.

Hat jemand eine einfache Lösung? Complex/hacky Lösung, die ich mir vorstellen kann ist scrollbar wird 1000% Breite haben und wenn es nicht scrollbar ist, wäre es Standard/100%. Verwenden von @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

OK, ich habe eine Lösung gefunden.

Einen Behälter umwickeln und float:left; darauf auftragen.

http://jsfiddle.net/2ugbkb6r/

Answer 2

Hier ist der 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>

Answer 3

Vielleicht ist es besser, aber es funktioniert. Einfach display:table; zu #container hinzufügen http://jsfiddle.net/xdKrF/36/