我正在制作更易于访问的网页.我遇到了一个问题,当我扩大页面的范围时,元素似乎在屏幕下方重新定位.我相信这是因为我基于不固定的百分比设置了较高的边距.我不太确定为什么随着屏幕的变宽,高度会增加.使用flexGrow时,高度和宽度是否设置为固定比例？

我使用具有这些样式替代的material-ui：

const styles = theme => ({
  root : {
    flexGrow: 1,height: '100%',width: '100%',display: 'flex',justifyContent: 'center',backgroundColor: 'green'
},form: {
    backgroundColor: 'grey',width: '75%',flexDirection: 'column',marginTop: '40%',marginBottom: '50%',padding: 20,paddingTop: 35,minHeight: 200,},})

这是我正在使用的表单元素：

<div className={classes.root}>
    <form className={classes.form} onSubmit={this.login}>
       <Typography component="h2" variant="headline">Login</Typography>
    </form>
</div>

我希望表单的高度在宽度增加时保持不变,但这不是我看到的结果.