Flex box column showing up as a row (side by side) instead of the next item going into next line-CodePudding

Here is my code, the HTML is probably not of much use

<div class="col-1" v-for="m in messages" :key="m.id">
  <div class="message-box">
    {{m.id}}
  </div>
</div>

here is the CSS

.col-1{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex-wrap: wrap;
  flex: 1;
  width: 20px;
  height: 94vh;
  background-color: #747D88;
  justify-content:start;
  align-items: center;
}

CodePudding user response：

Try to use flex-driection: row and get rid of width prop. You can use min or max -width and using height make sure that you have enough space to wrap items.

check jsfiddle

CodePudding user response：

Just use display: flex and flex-direction: column

.col-1 {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 94vh;
  background-color: #747D88;
}

.message-box {
  margin: 3px;
  background-color: green;  
}

<div class="col-1" v-for="m in messages" :key="m.id">
  <div class="message-box">
    <div>Hello 1</div>
  </div>
  <div class="message-box">
    <div>Hello 2</div>
  </div>
  <div class="message-box">
    <div>Hello 3</div>
  </div>
</div>