I have a container and items which wrap:
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/ZEJGjEK
<div class="cont">
<div class="item">Item 1 sf</div>
<div class="item">Item 2 sdfgdf</div>
<div class="item">Item 3 fdgsg</div>
<div class="item">Item 4 sdfgsfdgfsdg</div>
<div class="item">Item 5 xfgfsd</div>
<div class="item">Item 6 sfdgsdfgd</div>
<div class="item">Item 7 sdfgdfsg</div>
<div class="item">Item 8 wrsdffd</div>
</div>
.cont {
display: flex;
flex-wrap: wrap;
background: grey;
}
.item {
border: 1px solid red;
background: blue;
white-space: nowrap;
color: white;
padding: 20px;
}
I need the wrapped items to be aligned vertically as if they were in columns:
How can I do this given that I don't know the width of the items or the container? Can I make them wrap according to the available width but be vertically aligned with each other?
