Как увеличить ширину бумаги до максимальной, но сохранить ее гибкость?

Question

В приложении React, использующем Material-UI, ширина бумаги всегда может быть увеличена максимум до 600 пикселей, независимо от того, имеет ли ее ширина ширину меньше или больше 600 пикселей, но при этом сохраняйте гибкость бумаги, поэтому, когда родительский элемент бумагиширина контейнера уменьшается до менее чем 600 пикселей, бумага сокращается также по ширине родительского элемента?

В настоящее время у меня есть:

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>

Задание фиксированной ширины 600 пикселей для бумаги не дает желаемых результатов, поскольку при уменьшении родительской ширины бумаги до менее чем 600 пикселей (например, размер браузера уменьшается по горизонтали), более негибкая бумага остается жесткой до ширины 600 пикселей.

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
  },
});