图像溢出网格项

Question

我正在尝试构建一个网格，该网格的某个项目包含一个图像（头像），当设置了特定的断点时，图像溢出了网格项目的宽度。 我试图将图像包装在具有固定宽度的div中，但仍然溢出

<Grid container>
 <Grid item xs={12} sm={4}>
  <Avatar
    style={{ width: 184, height: 184 }}
    alt="Default Profile Picture"
    src="https://via.placeholder.com/200"
   />
 </Grid>
 <Grid item xs={12} sm={8} style={{ backgroundColor: 'red' }}>
  form
 </Grid>
</Grid>