React MUI Grid布局区域自适应屏幕及添加垂直滚动条问题求助

原始需求 #

参考下图实现可视化布局：

原有代码 #

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

问题修复 #

第二列加垂直滚动条 #

1. 给外层最顶部的Grid容器设置固定高度，示例为height: 100vh，可根据父容器实际高度调整
2. 给第二列外层Grid item添加maxHeight: 100%限制
3. 删除第二列内层Grid container的justifyContent: space-around属性
4. 给第二列内层Grid container添加overflowY: auto样式，内容超出容器高度时自动显示滚动条

第三列自适应填充+滚动 #

1. 给第三列外层Grid item添加flexGrow: 1属性，自动占满剩余水平空间，同时设置height: 100%和其他列高度对齐
2. 将第三列内层Grid container的alignItems属性改为stretch，保证子元素宽度占满整列
3. 给两个area对应的Grid item各添加flexGrow: 1属性平分垂直空间，同时添加overflowY: auto样式，内容超出时显示滚动条

修改后核心代码 #

<>
  <Grid
    container
    direction="row"
    justifyContent="flex-start"
    alignItems="flex-start"
    sx={{ height: '100vh' }}
  >
    {/* 第一列侧边栏 */}
    <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 sx={{ maxHeight: '100%' }}>
      <Grid className={classes2.color}
            container
            direction="column"
            alignItems="center"
            sx={{ overflowY: 'auto', maxHeight: '100%' }}
      >
        <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 sx={{ flexGrow: 1, height: '100%' }}>
      <Grid className={classes3.color}
            container
            direction="column"
            alignItems="stretch"
            sx={{ height: '100%' }}
      >
        <Grid item sx={{ flexGrow: 1, overflowY: 'auto' }}>
          <Box m={15}>item area 1</Box>
        </Grid>
        <Grid item sx={{ flexGrow: 1, overflowY: 'auto' }}>
          <Box m={15}>item area 2</Box>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</>

内容的提问来源于stack exchange，提问作者Peter Penzov