Wcinanie się elementu. Opcje

[Mephis]

Witam.

Mam mały problem, męczę się z nim od dłuższej chwili. Przeczuwam że odpowiedź będzie banalna.
Otóż mam pewien "pasek/bar", a oto jego kod:

[HTML] pobierz, plaintext 
<div style="width: 150px; height:20px; overflow: hidden;">
	<div style="width: 150px; height: 20px; background: black;">
		<div style="float: left; width: 100px; height: 20px; background: red;" id="dynamiczny" ></div>
		<div style="float: left; width: 30px; height: 20px; background: green;"></div>
	</div>
</div>
[HTML] pobierz, plaintext 

Tam gdzie zaznaczyłem "dynamiczny" to pasek który będzie zmieniać swoją szerokość. Ten następny nie.
Hmmm.. Gdy szerokość paska dynamicznego ma wartość 120px, jeszcze jest wszystko w należytym porządku, lecz gdy będzie tylko 121px, drugi pasek znika.
Problem polega na tym, że chciałbym, aby ten drugi pasek (30x20px) nie znikał, gdy już nie będzie mieć dla siebie miejsca, tylko zwyczajnie wcinał się w bok.

[Damonsson]

http://jsfiddle.net/2Vfrk/

[Mephis]

Nie działa. ZIelony element w dalszym ciągu znika.