html - Div scroll when less than min-width -

i have 2 divs, sidebar , main pane.

.main {     position: absolute;     min-width: 400px;     top: 0;     bottom: 0;     left: 200px;     right: 0;     overflow: auto; }  .leftsidebar {     position:absolute;     top:0;     bottom:0;     left:0;     width: 200px;     padding-left: 10px;     overflow-x: auto;     overflow-y: scroll; } 

i want main div have horizontal scrollbar when size less 400px, content gets cuts off when less. missing?

if helps, here demo of this. changing width of window should ideally add scrollbar main div, puts scrollbar on entire window.

solution: http://jsfiddle.net/nnt7ctjr/

by giving .main min-width forced stay @ dimensions , overflow outside of viewport, scroll bar appeared entire screen.

so solution mimic effect within .main. created object span.content , gave min-width:400px;. text retain 400px dimension while .main div continues shrinking.