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.
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>