Make columns dynamically with divs in vertical

Question

I need to dynamically columns vertically without exceeding the container div. The scroll of the page should be horizontal. Take the example here (column 21 should move up as the image shown)

Image: http://i.stack.imgur.com/f2zWQ.png

html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #contenedor-principal {
        height: 500px;
        background-color: lightgray;
    }

    .columna {
        width: 200px;
        height: 100%;
    }

    .nivel {
        width: 150px;
        min-height: 20px;
        margin: 5px;
        color:white;
    }

    .nivel1 {
        background-color: green;
    }

    .nivel2 {
        background-color: red;
    }

    .nivel3 {
        background-color: yellow;
    }

    .nivel4 {
        background-color: aqua;
    }

    .nivel5 {
        background-color: black;
    }

<div id="contenedor-principal">
    <div class="nivel nivel1">
        1
    </div>
    <div class="nivel nivel2">
        2
    </div>
    <div class="nivel nivel3">
        3
    </div>
    <div class="nivel nivel4">
        4
    </div>
    <div class="nivel nivel5">
        5
    </div>
    <div class="nivel nivel5">
        6
    </div>
    <div class="nivel nivel5">
        7
    </div>
    <div class="nivel nivel5">
        8
    </div>
    <div class="nivel nivel5">
        9
    </div>
    <div class="nivel nivel5">
        10
    </div>

    <div class="nivel nivel5">
        11
    </div>
    <div class="nivel nivel5">
        12
    </div>
    <div class="nivel nivel5">
        13
    </div>
    <div class="nivel nivel5">
        14
    </div>
    <div class="nivel nivel5">
        15
    </div>
    <div class="nivel nivel5">
        16
    </div>
    <div class="nivel nivel5">
        17
    </div>
    <div class="nivel nivel5">
        18
    </div>
    <div class="nivel nivel5">
        19
    </div>
    <div class="nivel nivel5">
        20
    </div>
    <div class="nivel nivel5">
        21
    </div>
    <div class="nivel nivel5">
        22
    </div>
    <div class="nivel nivel5">
        23
    </div>
    <div class="nivel nivel5">
        24
    </div>
    <div class="nivel nivel5">
        25
    </div>
    <div class="nivel nivel5">
        26
    </div>
    <div class="nivel nivel5">
        27
    </div>
    <div class="nivel nivel5">
        28
    </div>
    <div class="nivel nivel5">
        29
    </div>
    <div class="nivel nivel5">
        30
    </div>
    <div class="nivel nivel5">
        31
    </div>
    <div class="nivel nivel5">
        32
    </div>
</div>

Thanks.

Answer 1

One possible solution is to use flex:

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#contenedor-principal {
  height: 500px;
  background-color: lightgray;
  display: flex; /*set display to flex*/
  flex-direction: column; /*flex direction colum*/
  flex-wrap: wrap; /*flex wrap*/
  align-content: flex-start; /*add align content flex start*/
}
.columna {
  width: 200px;
  height: 100%;
}
.nivel {
  width: 150px;
  min-height: 20px;
  margin: 5px;
  color: white;
}
.nivel1 {
  background-color: green;
}
.nivel2 {
  background-color: red;
}
.nivel3 {
  background-color: yellow;
}
.nivel4 {
  background-color: aqua;
}
.nivel5 {
  background-color: black;
}

<div id="contenedor-principal">

  <div class="nivel nivel1">
    1
  </div>
  <div class="nivel nivel2">
    2
  </div>
  <div class="nivel nivel3">
    3
  </div>
  <div class="nivel nivel4">
    4
  </div>
  <div class="nivel nivel5">
    5
  </div>
  <div class="nivel nivel5">
    6
  </div>
  <div class="nivel nivel5">
    7
  </div>
  <div class="nivel nivel5">
    8
  </div>
  <div class="nivel nivel5">
    9
  </div>
  <div class="nivel nivel5">
    10
  </div>

  <div class="nivel nivel5">
    11
  </div>
  <div class="nivel nivel5">
    12
  </div>
  <div class="nivel nivel5">
    13
  </div>
  <div class="nivel nivel5">
    14
  </div>
  <div class="nivel nivel5">
    15
  </div>
  <div class="nivel nivel5">
    16
  </div>
  <div class="nivel nivel5">
    17
  </div>
  <div class="nivel nivel5">
    18
  </div>
  <div class="nivel nivel5">
    19
  </div>
  <div class="nivel nivel5">
    20
  </div>
  <div class="nivel nivel5">
    21
  </div>
  <div class="nivel nivel5">
    22
  </div>
  <div class="nivel nivel5">
    23
  </div>
  <div class="nivel nivel5">
    24
  </div>
  <div class="nivel nivel5">
    25
  </div>
  <div class="nivel nivel5">
    26
  </div>
  <div class="nivel nivel5">
    27
  </div>
  <div class="nivel nivel5">
    28
  </div>
  <div class="nivel nivel5">
    29
  </div>
  <div class="nivel nivel5">
    30
  </div>
  <div class="nivel nivel5">
    31
  </div>
  <div class="nivel nivel5">
    32
  </div>
</div>

References:

align-content

flex-direction

flex-wrap