Reactjs 材质UI网格项在Safari上溢出其网格容器

我在Safari浏览器上遇到了一个问题，我的材质UI网格容器没有在其边界内保存其网格项元素。这似乎只是Safari浏览器的问题

这是我的页面代码

<Grid
      item
      container
      direction="column"
      justify="space-between"
      className={classes.questionContainer}
    >
      <Grid item>
        <Typography component="h1" variant="h1">
          {question.text}
        </Typography>
      </Grid>

      <Grid
        item
        container
        xs={12}
        justify="flex-start"
        className={classes.btnBlock}
      >
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle1 || 'Yes'}
          </Button>
        </Grid>
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle2 || 'No'}
          </Button>
        </Grid>
          <Grid item xs={3} className={classes.btnContainer}>
            <Button
              variant="outlined"
              color="primary"
              className={classes.btn}
            >
              {customButtonTitle3}
            </Button>
          </Grid>
      </Grid>
    </Grid>

为什么会发生这种情况？我如何才能在Safari中修复这种情况，而不在其他浏览器中中断？ 不幸的是，我没有访问Mac OS的权限来正确地测试它

const useStyles = makeStyles((theme: Theme) => ({
  questionContainer: {
    padding: theme.spacing(6, 6),
    minHeight: '340px',
  },

  btnBlock: {
    flexBasis: 0,
  },
  btnContainer: {
    marginRight: '12px',
  },
  btn: {
    fontSize: '16px',
    lineHeight: '24px',
    color: theme.palette.text.secondary,
    padding: '10px 0',
    width: '100%',
    margin: '0 12px',
  },
}))