如何将纸张的宽度扩大到最大宽度但保持灵活性？

Question

在使用 Material-UI 的 React 应用程序中，如何始终将纸张的宽度扩展到最大 600px，而不管其内容的宽度是否小于或大于 600px，但要保持纸张灵活，所以当纸张的父级时容器的宽度缩小到小于600px，纸张也沿着父级缩小自己的宽度？

目前我有：

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>

为纸张指定 600px 的固定宽度不会得到想要的结果，因为当纸张的父宽度缩小到小于 600px（例如浏览器水平缩小）时，不再灵活的纸张仍然保持刚性到 600px宽度。

Answer 1

您可以组合使用将width 设置为“100%”和将maxWidth 设置为600。

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    ...theme.mixins.gutters(),
    padding: theme.spacing.unit * 2,
    width: "100%",
    maxWidth: 600
  },
});