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

Posted 2023-02-22

【中文标题】如何将纸张的宽度扩大到最大宽度但保持灵活性？

【英文标题】：How to expand a paper's width to a maximum width but maintain it flexible?

【发布时间】：2019-07-10 15:49:30

【问题描述】：

在使用 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宽度。

【问题讨论】：

你试过宽度：自动吗？应该会自动扩展和收缩

【参考方案1】：

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

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