Flexbox column layout does not wrap-CodePudding

I am quite a newcomer in flexbox css. I have a div that contains some "cells" (divs), please see following markup:

<div class="outer">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

This is my css (scss):

.outer {
  width: 600px;
  height: 300px;
  border: 5px solid black;
}

.inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  flex-grow: 0;
  flex-basis: 100px;
  box-sizing: border-box;
  
  @for $i from 1 through 9 {
    &:nth-child(#{$i}){
      border: 3px solid rgb(random(255),random(255),random(255));
    }
  }
}

The problem is that I can't make the cells wrap when they reach the end of the available space in the wrapper div. Am I missing something?

CodePudding user response：

I guess this rule height: 100%; is missing in your .inner css declaration set. Otherwise the browser doesn't know when to "start wrapping" :)