In one of my columns, I have a list that I'm splitting using CSS to wrap the data in the next column after a specific height. However, in the demo, you'll notice there's a lot of white space between the first and second columns. I'm unsure how to make the list items fill up that white space.
new Vue({
el: '#app',
data() {
return {
lists: [ // List items are here... ]
}
}
})
.column_wrapper {
display: flex;
max-height: 100px;
flex-flow: column wrap;
}
<!-- Scripts and links -->
Currently, it appears that the list is only expanding to the right. How can I make it expand or contract evenly to both sides?