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

Answer 2

It might be late but I think 'column-wrap' is not fully supported by Firefox. As you said, you'll need this in Chrome, in that case you can see what Chris Coyier did: add webkit prefix --> http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope is not late :/

Answer 3

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.