How can I wrap columns vertically when their width doesn't fit their containers?

Question

I have problem with flexbox wrapping into column. The container doesn't fit the content width as seen in the snippet below.

This works if you replace both flex-flow of .wrapper and .container with flex-flow: row wrap, the height fit the content height its children, but the problem then is that the columns then flow horizontally and appear under each other, rather than flowing vertically and beside each other.

I expect the following result:

.wrapper {
  display: flex;
  flex-flow: column wrap;
  max-height: 500px;
  max-width: 500px;
  overflow: scroll;
}

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  background-color: red;
  margin: 5px;
}

.product {
  margin: 3px;
  min-width: 100px;
  min-height: 100px;
  background-color: #ccc;
  text-align: center;
  font-weight: bold;
  line-height: 100px;
}

<div class='wrapper'>
  <div class='container'>
    <div class="product">0.1</div>
    <div class="product">0.2</div>
    <div class="product">0.3</div>
    <div class="product">0.4</div>
    <div class="product">0.5</div>
    <div class="product">0.6</div>
    <div class="product">0.7</div>
    <div class="product">0.8</div>
  </div>
  <div class='container'>
    <div class="product">1.1</div>
    <div class="product">1.2</div>
    <div class="product">1.3</div>
    <div class="product">1.4</div>
    <div class="product">1.5</div>
    <div class="product">1.6</div>
    <div class="product">1.7</div>
    <div class="product">1.8</div>
  </div>
  <div class='container'>
    <div class="product">2.1</div>
    <div class="product">2.2</div>
    <div class="product">2.3</div>
    <div class="product">2.4</div>
    <div class="product">2.5</div>
    <div class="product">2.6</div>
    <div class="product">2.7</div>
    <div class="product">2.8</div>
  </div>
  <div class='container'>
    <div class="product">3.1</div>
    <div class="product">3.2</div>
    <div class="product">3.3</div>
    <div class="product">3.4</div>
    <div class="product">3.5</div>
    <div class="product">3.6</div>
    <div class="product">3.7</div>
    <div class="product">3.8</div>
  </div>
</div>

Answer 1

The problem is that the .container doesn't have a width defined, so how .wrapper does have a maximum of with and it's a Flexbox, all the children (.container) will fit automatically to their parent, that's the problem.

You can solve it by setting a with to the container class.

Something like this: width: 212px;