Material UI grid items overflow their grid container on Safari

Viewed 722

I ran into a problem on Safari browser where my Material UI Grid container does not hold its Grid item elements within it's boundaries. This seems to be a problem only for Safari browsers.

Here is what the element should look like and it does on all browsers except for Safari

And there goes Safari

And here is my code for the page.

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

Why is this happening and how can I fix that for Safari and not break for other browser? Unfortunately, I do not have access to a Mac OS to test it myself properly

0 Answers
Related