How do I use "flex-flow: column wrap"?

This was a bug indeed. Here the links to tracker:

https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

As OP wanted:

I need the flexbox to shrink-to-fit its columns. Why? I'm trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things. So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a "top to bottom, left to right" effect, where the parent has no empty space.

We can simply achieve it with flex-flow: column wrap;, align-content: flex-start; and a fixed height wrapper together.

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

Updated fiddle: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

If you don't know the height of each item or how many items you will have, a more flexible solution is this:

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

You may also need to adjust margin-top of .child:first-child if they don't align to the top.

I had a similar problem, I had a

div {
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
}

But child items were not wrapping, it was only one column. The solution was giving the div max-height property then items wrapped.