0

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?

This is what I would like to achieve: This is what I would like to achieve

Lee Taylor
  • 7,155
  • 14
  • 29
  • 44
Jason Xiao
  • 21
  • 2

0 Answers0