I have a setup like this:
.table {
display: flex;
flex-direction: row;
max-height: 200px;
}
.column {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 200px;
}
<div class="table">
<div class="column">
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
<div>item1</div>
</div>
<div class="column">
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
<div>item2</div>
</div>
<div class="column">
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
<div>item3</div>
</div>
</div>
Note that there are 3 "column"s, and each one contains unknown length of items. That's why I would like to have it auto-wrapped.
Right now, I am using display: flex and flex-wrap: wrap to achieve the column wrapping, but it doesn't seem to adjust the wrapper's width accordingly, which leads to the next column is overlapping with the previous one.
Is there a better way to make sure columns are not overlapped, but still keep the behavior of auto-wrapping list items inside?