How do I use “flex-flow: column wrap”?

Question

Short version

When using flex-flow: column wrap and display: inline-flex, it doesn\'t shrinkwrap like inline-block:

Answer 1

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