Main Div soll Scrollbar bekommen wenn zu eng

[WernerK]

Bzw. man kann es ganz einfach so nachvollziehen:
Das Main Div aist auf 20em in der Breite begrenzt. Im "JobList" Div ist ein überbreiter Inhalt.Der Scrollbalken erscheint nun zwar, aber der Inhalt wird trotzdem umgebrochen. Der pinkfarbige Inhalte mit den vielen "xxxx" erscheint nun unter dem linken "Navigation" Div.
Das möchte ich vermeiden. Es soll immer daneben erscheinen.

  
<div class="MainDiv">  
	<div id="DirlistNavigation">  
    NAvigation  
	    </div>  
  
    <div id="JobList">  
  
     Joblist xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  
  
    </div>  
</div>  
  

  
.MainDiv{  
	overflow:auto;  
  	position:absolute;  
  	top:170px;  
  	left:1px;  
	width:20em;  
}  
#DirlistNavigation{  
	background:#3F9;  
	float:left;  
	width:auto;  
}  
#JobList{  
	background:#F3F;  
}