Tengo numerosos elementos div que me gustaría desplazar horizontalmente en lugar de verticalmente, en base al 100% de la altura de los padres.

He hecho un movimiento rápido hacia arriba del resultado deseado.

Como ejemplo, si el padre tiene 600 píxeles de altura, seis elementos de 100 px se ajustarán antes de crear una nueva columna y una altura de 900 píxeles se ajustará a 9 elementos.

¿Cómo puedo lograr este efecto? Solo necesito que funcione en Chrome, ya que la compatibilidad con varios navegadores no está disponible para esto.

Código para que juegues,http://jsfiddle.net/yQ5AR/

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
</div>

.container{
    max-height: 400px;
    width: 100%;
    overflow: scroll;
}

.item{
    height: 100px;
}