I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on.
When I add a 100% width, it makes the width for the smallest div the same as the largest, leaving space on either side.
The columns are iterated over using {orderedColumns.map((column, index) => {
return (
<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>If you have any suggestions, they would be greatly appreciated.
Thank you.