One issue I'm facing is that when I have children with full width in a Grid item, they end up overlapping to the right side of their parent.
To illustrate this problem, here's the code: 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);The output of the above code can be seen in the image below: https://i.sstatic.net/pMiQy.png