Vertically stack items in a row if height is available

Question

I have a flex row with some items in it.

These items can scale in height however some items will remain small.

I'm wondering if it's possible to stack certain items in the flex box.

Here's a quick example I've made:

.row {
  background: #ccc;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

span {
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
}

<div class="row">
  <div class="item">
    <span>1</span>
  </div>
  <div class="item">
    <span>2</span>
  </div>
  <div class="item">
    <span>3</span>
    <ul>
      <li>3.a</li>
      <li>3.b</li>
      <li>3.c</li>
    </ul>
  </div>
  <div class="item">
    <span>4</span>
    <ul>
      <li>4.a</li>
      <li>4.b</li>
      <li>4.c</li>
    </ul>
  </div>
</div>

codepen

In this example, #1 and #2 don't take up much vertical space, so I'd like them to be stacked on top of each other.

Is this possible without restructuring the whole row into two separate columns?

---

Edit:

This is not a duplicate of this post: How to disable equal height columns in Flexbox?

The suggested post mentions using align-items: flex-start.

This helps but does not answer my question.

Answer 1

The only way I can see this happening in flexbox is with flex-flow: column wrap and a fixed height on the container.

.row {
  background: #ccc;
  display: flex;
  flex-flow: column wrap;
  max-height: 150px;
}

span {
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 1em;
}

<div class="row">
  <div class="item">
    <span>1</span>
  </div>
  <div class="item">
    <span>2</span>
  </div>
  <div class="item">
    <span>3</span>
    <ul>
      <li>3.a</li>
      <li>3.b</li>
      <li>3.c</li>
    </ul>
  </div>
  <div class="item">
    <span>4</span>
    <ul>
      <li>4.a</li>
      <li>4.b</li>
      <li>4.c</li>
    </ul>
  </div>
</div>