How to have break in flex div so that overflowing items can come in next line is css?

Question

1. I use material-ui popper to show a list of avatars.
2. I want to show avatars horizontally in the popper.

<Popper style={{ display: 'flex', maxWidth: '200px',  }}>
  <div style={{ marginRight: '20px' }}><Avatar /></div>
  <div style={{ marginRight: '20px' }}><Avatar /></div>
</Popper>

3. It's overflowing from the popper, but I want them to come to next line.

4. I need a maxWidth. because I don't want popper to grow longer.

5. Looking like this right now:

Answer 1

You can add flex-wrap: wrap (flexWrap: 'wrap') to the code, so It will go to the next line everytime the items occupy the full width.

<Popper style={{ display: 'flex', maxWidth: '200px', flexWrap: 'wrap' }}>
  <div style={{ marginRight: '20px' }}><Avatar /></div>
  <div style={{ marginRight: '20px' }}><Avatar /></div>
</Popper>

Answer 2

Use flexWrap:'wrap' in container View