How to Use "Flex-Flow: Column Wrap"

Flex items not wrapping in a column direction container

Apply total height on ul and make it wrap.

Then apply flex-basis on ul li (which is height because we've applied flex-direction: column) to 50%. Like:

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

Have a look at the snippet below:

ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  flex-wrap: wrap;  flex-direction: column;  height: 100px;}ul li {  flex-basis: 50%;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li></ul>

Flex columns only center when wrapped

align-content works only when there are multiple lines in the flex container.

align-items or align-self is needed to align a single line.

Here's a complete explanation:

How does flex-wrap work with align-self, align-items and align-content?

.filter_drop {  display: flex;  flex-flow: column wrap;  align-content: center;  align-items: center; /* NEW */  list-style: none;  margin: 0;  padding: 0;  max-height: 7em;  border-bottom: 1px solid black;}
.filter_drop li {  margin: 0 1em 0 0;  line-height: 1.2;}

<ul class="filter_drop">  <li>One</li>  <li>Two </li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li>  <li>Eight </li>  <li>Nine</li>  <li>Ten</li>  <li>Eleven</li>  <li>Twelve</li></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li>  <li>Six</li>  <li>Seven</li></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li></ul><ul class="filter_drop">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

Flex-Flow - folding 2nd column under 1st, and 4th column under 3rd

You just have to apply flex-direction according to viewport

body {
  background-color: brown;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.child {
  padding: .25rem;
  background-color: antiquewhite;
  margin: .25rem;
  border-radius: 8px;
}

/* MEDIUM DEVICES */

@media only screen and (min-width: 768px) {
  body {
    background-color: blueviolet;
  }
  .wrapper {
    flex-direction: row;
  }
  .parent-container {
    flex: 1;
  }
}

/* LARGE DEVICES */

@media only screen and (min-width: 992px) {
  body {
    background-color: orange;
  }
  .parent-container {
    display: flex;
  }
  .child-container {
    flex: 1;
  }
  .child-container+.child-container {
    margin-top: 2.65rem;
  }
}

<div class="wrapper">
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
</div>

flex-flow: column wrap doesn't stretch the parent element's width

You are trying to have a flex container inside the oder one, the first one needs the display flex to get the content of the element below

I would also make some small changes but it really depends on what you are trying to achive.

If this isnt what you were looking for, please comment so i can try to improve it.
Hope this works :)

.box{
                background: #f03;
                position: relative;
                display: flex;
                max-width: 220px;
                padding: 20px;
            }
            .in{
                  display: flex;
                  flex-wrap: wrap;
                  max-width: 220px;
            }

*{                margin: 0;                padding: 0;            }            .box{                background: #f03;                position: relative;                display: flex;                max-width: 220px;                padding: 20px;            }            .in{                  display: flex;                  flex-wrap: wrap;                  max-width: 220px;            }            .item{                background: #fe3;                width: 100px;                margin-bottom: 20px;                height: 100px;                            }            .item-2{                 order: 3;            }            .item-3{                 margin-left: 20px;            }

    <body>         <div class="box">             <div class="in">                 <div class="item">1</div>                 <div class="item item-2">2</div>                 <div class="item item-3">3</div>             </div>         </div>    </body>    <!-- 第三个并没有把父元素宽度撑开 -->

flex-flow: row wrap - displaying as column and not a row

Your image is too big for the row, flex is working properly and wrapping your image underneath the text because there is no more space. I know you say the image has been sized specifically for that area but with the margins you have on the parent and the text wrapper its being push underneath.

When flexbox items wrap in column mode, container does not grow its width

The Problem

This looks like a fundamental deficiency in flex layout.

A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.)

This question has been asked many times (see list below), with no clean answers in CSS.

It's hard to pin this as a bug because the problem occurs across all major browsers. But it does raise the question:

How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?

You would think at least one of them would get it right. I can only speculate on the reason. Maybe it was a technically difficult implementation and was shelved for this iteration.

UPDATE: The issue appears to be resolved in Edge v16.

Illustration of the Problem

The OP created a useful demo illustrating the problem. I'm copying it here: http://jsfiddle.net/nwccdwLw/1/

Workaround Options

Hacky solutions from the Stack Overflow community:

"It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
"It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."

More Analysis

Chromium Bug Report
Mark Amery's answer

CSS flex column wrap with no height pre-set and forcing of a number of columns

Dropping the Flex container in favor of column-count might help: https://jsfiddle.net/69nmwqag/

.gallery-height {
  column-count: 3;
}

Then I dropped width: 30%; on .img.

Flex wrap column: fill the available width with columns

No. With pure css you can't.

However if you use align-content: stretch; You can distribute the current columns to the entire container width.

.container {        height: 80px;        display: flex;        align-items: flex-start;        justify-content: flex-start;        flex-flow: column wrap;        align-content: stretch;    }    .container > span {        margin: 3px 12px;        background: #ebd2b5    }

<div class="container">    <span>Apple</span>    <span>Apricot</span>    <span>Avocado</span>    <span>Banana</span>    <span>Bilberry</span>    <span>Blackberry</span>    <span>Blackcurrant</span>    <span>Blueberry</span>    <span>Boysenberry</span>    <span>Currant</span>    <span>Cherry</span>    <span>Cherimoya</span>    <span>Cloudberry</span>    <span>Coconut</span></div>