Div to overflow horizontally (to the right) - css

Question

I have a div, with a few input boxes in a div and my div has a fixed height. I would like for this to overflow to the right instead of the bottom.
JSFiddle
<div>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
div {
overflow:hidden;
white-space:nowrap;
width:200px;
height:100px;
}

Answer 1

Use display:inline-block for the content elements you want to be horizontally scrolled, and add white-space:nowrap; to the container.
example: http://jsfiddle.net/4Lex5wdo/
#container {
width:500px;
background-color: #CCC;
overflow: auto;
height: 100px;
white-space:nowrap;
}
.contents {
width: 200px;
height: 60px;
display:inline-block;
margin-right:20px;
}
#one {
background-color:#ABC;
overflow-y: auto;
white-space: normal;
}
#two {
background-color:#333;
}
#three {
background-color:#888;
}
#four {
background-color:#E29E1E;
}
<div id="container">
<div class="contents" id="one">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="contents" id="two"></div>
<div class="contents" id="three"></div>
<div class="contents" id="four"></div>
</div>
Update
If you want the divs inside the container to be scrollable just add overflow-y: auto; white-space: normal; to the elements you want, for example if you want just the first div #one to be scrollable as you mentioned on your comment, do this:
#one {
background-color:#ABC;
overflow-y: auto;
white-space: normal;
}
if you want all of the divs inside of it to be scrollable give this properties to the class that they all have instead which is .contents:
.contents {
width: 200px;
height: 60px;
display:inline-block;
margin-right:20px;
overflow-y: auto;
white-space: normal;
}
You can check the live example here on Jsfiddle or run the code snippet, it's already updated.

Answer 2

In order for you to do this, you have to get rid of the breaklines (<br>), and you have to add overflow-x:scroll; to your css code for the div.
You need to also set the inputs to have a display:inline-block; property.
If you want to keep the breaklines, the only way the div will overflow is if the div has less of a width than the components within it (in this case: the input fields).
Fiddle