Make a div overflow horizontally if max height is reached?

Question

I am using Bootstrap and trying to achieve the following with thumbnails.

I the div #demo reaches its max height then make anything after this height overflow horizontally and enable a scrollbar horizontally. I tried overflow-x:auto and other tricks but the div overflows vertically. Any ideas on how to do this?

<div class="row">
<a class="col-md-6 col-xs-12" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
<div id="demo" style="overflow-y: auto; max-height: 430px;">
<a class="col-md-4 col-xs-4" href="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg">
<div class="thumbnail">
<img src="http://i1.ytimg.com/vi/Tm0FAcMQdzg/mqdefault.jpg" alt="...">
</div>
</a>
.....
</div>
</div>

Answer 1

Have a look here: Create horizontally scrolling List Item view using Bootstrap Columns

And also look this sample: http://jsfiddle.net/V5zWT/10/

<div class="DocumentList">
<div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">aaa</div>
</div>
</div>