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

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.