在 Material UI 抽屉中用空格分隔垂直元素

Question

我使用 Material UI（图片左侧）实现了以下抽屉。我想将抽屉中的最后一个元素粘在它的底部，如图右侧所示。为此，我尝试了许多方法，例如使用Grid 组件、Box 和带有flex-box 参数的divs，但没有任何效果。我怎样才能做到这一点？目前，我对抽屉内容的实现是这样的：

  <Grid container spacing={0} direction="column" alignItems="start" justify="space-between" alignContent='space-between'>
    <Grid item xs={12}>
      <Divider />
      <CardHeader
        ...
      />
      <Divider />
      <List>
        <...>
      </List>
      <Divider />
      <List>
        <...>
      </List>
    </Grid>
    <Grid item xs={12}>
      <Divider />
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            Z
          </Avatar>
        }
        title="ZaraHealth"
        subheader="v. 0.1"
      />
    </Grid>
  </Grid>

任何评论都会有所帮助！

Answer 1

Flexbox 就是解决方案。这是一个带有简单 div 的简化版本，因此您可以将此解决方案映射到您的解决方案

.sidebar {
  height: calc(100vh - 60px); // if topbar is 60px in height
  width: 320px;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  justify-content: space-between;
}

<div class="sidebar">
  <div class="top-nav">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>

  </div>

  <div class="bottom-nav">
    <ul>
      <li>Item1</li>
    </ul>
  </div>

</div>