Div scroll when less than min-width

Question

I have 2 divs, a sidebar and the 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 the main div to have a horizontal scrollbar when the size is less than 400px, but currently content just gets cuts it off when it is less. What am I missing?

If this helps, here is a demo of this. Changing the width of the window should ideally add a scrollbar to the main div, but it only puts the scrollbar on the entire window.

Answer 1

Solution: http://jsfiddle.net/nnt7ctjr/

By giving the .main a min-width you forced it to stay at those dimensions and overflow outside of the viewport, thus a scroll bar appeared for the entire screen.

So the solution is to mimic this effect within the .main. I created another object span.content and gave it the min-width:400px;. Now the text will retain the 400px dimension while the .main div continues shrinking.