Отдельные вертикальные элементы с пробелом в ящике Material UI

Question

Я реализовал следующий ящик с помощью пользовательского интерфейса материалов (левая сторона рисунка). Я хочу прикрепить к его нижней части последний элемент ящика, как показано на правой стороне рисунка. Для этого я пробовал много подходов, таких как использование компонента Grid, Box и div s с параметром flex-box, но ничего не получалось. Как я могу этого достичь? На данный момент моя реализация содержимого ящика выглядит примерно так:

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