Auto-resize area to fit screen

Question

I want to create a visual layout according to this picture:

Code:

<>
          <Grid
              container
              direction="row"
              justifyContent="flex-start"
              alignItems="flex-start"
          >
              <Grid item>

                  <Grid className={classes1.color}
                        container
                        direction="column"
                        justifyContent="flex-start"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m={2}>
                              item link 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={2}>
                              item link 2
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={2}>
                              item link 3
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={2}>
                              item link 4
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className={classes2.color}
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m={10}>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={10}>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={10}>
                              item 13
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={10}>
                              item 14
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={10}>
                              item 15
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={10}>
                              item 16
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className={classes3.color}
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m={15}>
                              item area 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m={15}>
                              item area 2
                          </Box>
                      </Grid>
                  </Grid>

              </Grid>

          </Grid>
      </>

Full code:

https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx

The issues that I can't solve are how I can add vertical scrollbar for the second column(item 1-6). I also want to autosize item 'area 1' and 'item area 2' to fit the rest of the horizontal area and add vertical scrollbar.

Answer 1

for using vertical scrollbar in second column you can separate the parent <Grid container> to three Grid and then use style={{ height: "100%", overflow: "auto" }} inside middle <Grid container>

base on material-ui documentation at "xl" and "xs" props, you can use xs={12} in <Grid item xs={12}> to fit the rest of the horizontal area

check this codesandbox that look like your code