实质性UI网格项在Safari上溢出了网格容器

Question

我在Safari浏览器上遇到问题，其中我的Material UI Grid容器未在其边界内保存其Grid项元素。这似乎仅对于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>

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',
  },
}))

为什么会发生这种情况？我该如何为Safari修复此问题，而不会为其他浏览器中断？ 不幸的是，我无法使用Mac OS对其进行正确的测试