overflow-x scroll not working css

Question

I am trying to align two divs horizontally and I got it to work using display:inline-block however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.

Here's fiddle

<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>

.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}

.test1{
background-color:red;
 width:500px;
margin-left:16px;
display:inline-block;   


 }
.test2{
 margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;

vertical-align:top;


}

Answer 1

give parameters to width and height, so container can overflow.

http://jsfiddle.net/f5HWD/3

.container{
    width: 900px;
    height: 700px;
    display:table;
    margin: 0 auto;
    overflow:scroll;
}