How can we ensure that in a React application using Material-UI, the width of a paper always expands to a maximum of 600px, regardless of the width of its contents? We also want to keep the paper flexible, so that when the parent container's width shrinks to less than 600px, the paper adjusts its own width along with the parent.
Currently, our setup looks like this:
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
...theme.mixins.gutters(),
padding: theme.spacing.unit * 2
},
});
...
<Grid container className={classes.root}>
<Grid container justify="center">
<Paper className={classes.paper}>
</Paper>
</Grid>
</Grid>
Setting a fixed width of 600px for the paper doesn't give us the desired results, as it remains rigid at 600px even when its parent's width is less. How can we make the paper adjust dynamically?