Horizontal Scrolling of divs not working as expected

[slenz]

I've made a jsfiddle to demo my issue: here it is along with the css\[code\]<div -d=wrapper"><div id="header">Hello, I'm the header</div><div id="content"> <div id="content-left" >Some text in left</div> <div id="content-right">Some text in right</div></div><div id="footer">Footer</div></div>\[/code\]What I want is for the divs content-left and content-right to get narrower and sprout scroll bars as the window is made narrower in the x axis.What it does is once there's not enough room for both divs, it stacks content-right under content-left instead of narrowing them. I'd prefer for the scroll bars to appear only when required.