When I have a full width children in a Grid item, the children overlaps to the right side of its parent.

I have reproduced the code with the problem I'm having.

import React, { Component } from "react";
import { Paper, Grid, Button } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
class Demo extends Component {
  render() {
    const { classes } = this.props;
    return (
      <Paper>
        <Grid container spacing={16}>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth className={classes.button}>
              asdf
            </Button>
          </Grid>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth className={classes.button}>
              asdf
            </Button>
          </Grid>
        </Grid>
      </Paper>
    );
  }
}
const styles = theme => ({
  button: {
    margin: theme.spacing.unit
  }
});
export default withStyles(styles)(Demo);

When I have a full width children in a Grid item, the children overlaps to the right side of its parent.

I have reproduced the code with the problem I'm having. https://codesandbox.io/s/rn88r5jmn

import React, { Component } from "react";
import { Paper, Grid, Button } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
class Demo extends Component {
  render() {
    const { classes } = this.props;
    return (
      <Paper>
        <Grid container spacing={16}>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth className={classes.button}>
              asdf
            </Button>
          </Grid>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth className={classes.button}>
              asdf
            </Button>
          </Grid>
        </Grid>
      </Paper>
    );
  }
}
const styles = theme => ({
  button: {
    margin: theme.spacing.unit
  }
});
export default withStyles(styles)(Demo);

Gives me the result below:

• javascript
• css
• reactjs
• material-ui

1 Answer 1

The problem isn't the fullWidth prop, but the margin you are setting to the buttons, you can do something like this instead:

https://codesandbox.io/s/nnxl20l2q0

import React, { Component } from "react";
import { Paper, Grid, Button } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
class Demo extends Component {
  render() {
    const { classes } = this.props;
    return (
      <Paper className={classes.paper}>
        <Grid container spacing={16}>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth>
              asdf
            </Button>
          </Grid>
          <Grid item xs={6}>
            <Button variant="raised" fullWidth>
              asdf
            </Button>
          </Grid>
        </Grid>
      </Paper>
    );
  }
}
const styles = theme => ({
  paper: {
    padding: theme.spacing.unit
  }
});
export default withStyles(styles)(Demo);