我想根据这张图片创建一个视觉布局：

验证码：

<>
          <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>
      </>

完整代码：
https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx
我不能解决的问题是如何为第二列添加垂直滚动条（项目1-6）。我还想自动调整项目“区域1”和“项目区域2”，以适应水平区域的其余部分，并添加垂直滚动条。