ReactJS / Javascript: Grid item - Can't vertically center and set display at the same time-CodePudding

I'm having an issue with Grid I can't wrap my head around.

If I add the display constraints, eg. display={{ xs: "none", sm: "block" }}, I can't seem to vertically center my grid item.

If I remove display, I can vertically center the grid item by adding direction=column and justifyContent=center.

How can I do both at the same time? I want to hide the green box on xs, and also have its content vertically centered.

I've made a code sandbox where I simulated my issue:

https://codesandbox.io/s/silly-hodgkin-koybrj

<Grid item container>
    <Grid
      item
      container
      sx={{
        height: 100,
        bgcolor: "red"
      }}
      xs={6}
    >
      I am high
    </Grid>

    <Grid
      item
      container
      xs={6}
      sx={{
        bgcolor: "green",
        flexDirection: "column",
        justifyContent: "center"
      }}
      display={{ xs: "none", sm: "block" }} // this grid item is vertically centered if this line is commented out
    >
      Vertically center me
    </Grid>
</Grid>

CodePudding user response：

change the sm to "flex"