react-beautiful-dnd - adding Lists in next row if more than 4 Lists exist

Question

I'm using react-beautiful-dnd to drag and drop team members in different team lists. I have multiple Team lists, and a button which adds a new Team list. After I add 4 teams, I would like the 5th Team List to be on the second row.

Is this possible? If so, how? Currently, it extends horizontally. Re ordering the lists from different rows isn't a priority, however, I would like to be able to drag and drop the team members on Team lists in different rows.

Here is the codesandbox: https://codesandbox.io/s/teamlist-priwp?fontsize=14&hidenavigation=1&theme=dark

Answer 1

I've made 2 changes in css, you can use flex-wrap:

//App.js
const Container = styled.div`
  display: flex;
  flex-wrap: wrap; // <---- added
`;


//Team.js
// removed other flex properties from below
const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 220px;
  background-color: white;
`;

WORKING DEMO