I have a container of flex wrapped divs that overlap each other. these could be various heights and wrap multiple times. How do I avoid the overlap?

Question

I need the first div to push the second to the right and so on, however, the width of the div stays the same after it has wrapped causing it to overlap.

Adding in a 100% width works but it makes the width for the smallest div the same as the largest leaving space either side.

The columns are mapped over like so:

{orderedColumns.map((column, index) => {
        return (
          <Column
            key={index}
            column={column}
     
          />
        );
      })}

<div style={{ display: "flex" }}>
       <div
         style={{
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         }}
       >
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
       </div>
       <div
         style={{
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         }}
       >
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
       </div>
       <div
         style={{
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         }}
       >
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
       </div>
     </div>

Any ideas would be much appreciated.

Thanks.

score 0 · Accepted Answer · answered Dec 23 '21 at 11:02

In Flexbox columns the parent's width is not recalculated when the items wrap hence your issue. See When flexbox items wrap in column mode, container does not grow its width for reference.

So I can't see how you would be able to achieve the layout you want using flexbox columns as there's no way of the parent knowing the real width.

I have a container of flex wrapped divs that overlap each other. these could be various heights and wrap multiple times. How do I avoid the overlap?

1 Answers1