javascript - 如何在 flex div 中打断，以便溢出的元素可以进入下一行是 css？

Question

1. 我使用 material-ui 弹出器来显示头像列表。
2. 我想在弹出窗口中水平显示头像。

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

1. 它从弹出器中溢出，但我希望它们转到下一行。

2. 我需要一个最大宽度。因为我不想让 popper 变长。

3. 现在看起来像这样:

Answer 1

可以在代码中加入flex-wrap: wrap (flexWrap: 'wrap') 这样每次满格的时候都会跳到下一行宽度。

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