CSS Flex column wrap doesnt work

Question

I can't make wrap the divs into columns. Here is my code

.hosts.body
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: flex-start
    align-content: flex-start
    align-items: flex-start

    .server
      border-left: 0.3em solid $green
      padding: 0.3em
      color: $green
      margin: 0.1em
      background: #c8e6c9
      min-width: 12em
      max-width: 12em
      overflow: hidden

Link: http://codepen.io/CJRoman/pen/YXNGGq

What i'm doing wrong? I can't find out what it needs additionally to wrap.

Answer 1

you need to set a height to containing flexbox element,

try modifying like this:

  .body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
height: 500px

---

this fiddle is a little different but it's just to give you an idea