Having a div with multiple child divs floating left can be tricky. To prevent them from breaking, setting them to display:inline-block and white-space:nowrap seems like the solution. However, in some cases this may not work as expected.
If your goal is to enable horizontal scrolling but adding
overflow-x:scroll; overflow-y:visible.box1 {
width: 400px;
height: 300px;
white-space: nowrap;
display: inline-block;
}
.box2 {
float: left;
width: 50px;
height: 200px;
display: inline-block;
}
<div class="box1">
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="clearfix"></div>
</div>
To explore a potential solution and see an example implementation, check out this JSFiddle link