React Material UI - Grid Column height property

Question

Please refer to the picture for description. I have two div, one is 20% of total browser height, the other is should be 80%. I am using Material UI Grid for the positioning. Something looks like:

<Grid container direction={column}>
    <Grid item>1</Grid>
    <Grid item>2</Grid>
</Grid>

what should I do with the CSS in order to achive the result. I have tried to set the first grid item to height 20% and the second one to 80% but its not what I need.

Answer 1

If you want to have the same thing you are showing in picture, insted of using % you could use vh Viewport-percentage lengths . Something like:

<Grid container direction={"column"}>
    <Grid item className={classes.item20}>
      1
    </Grid>
    <Grid item className={classes.item80}>
      2
    </Grid>
</Grid>

The style:

item20: {
  height: "20vh",
},
item80: {
  height: "80vh",
}

Here a working example.