CSS white-space: nowrap poziomego przewijania bug

Question

Mam następujących znaczników

<style type="text/css"> 
    #outer 
    { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     width:100%; 
     white-space:nowrap; 
    } 

    #inner 
    { 
     background-color:#CCCCCC; 
     margin:0px 4px 0px 4px; 
     padding:5px 5px 0px 5px; 
     border:1px solid #9A9A9A; 
     border-width:1px 1px 0px 1px; 
    } 

</style> 

<div id="outer"> 
    <div id="inner"> 
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
    </div> 
</div> 

Gdy przeglądarka jest wystarczająco szeroka, wygląda to

Gdy przeglądania jest zmieniany wąski, to wygląda w ten sposób:

Chcę, aby szare tło wąskiego widoku rozciągało się do końca w prawo po przewinięciu. Co z moim znaczników i CSS jest przyczyną tego niepożądanego efektu (występują w Chrome, FF3 i IE8)

Answer 1

Łatwym rozwiązaniem jest, aby to zrobić: na #outer, usunąć i dodać float: leftwidth: 100%.

Live Demo