CSS Flex align 3 divs, 1 and 2 top, 3 at the bottom

I am trying to make a side bar, where I have a drop down option at the top, then my nav, then some controls at the bottom of the nav:

Desired Outcome

-My Dropdown
-My main nav
-nav item
-nav item

-space
-space

-My controls
-control
-control

Current Outcome

-My Dropdown
-My main nav
-nav item
-nav item
-My controls
-control
-control

SCSS

.nav-container {
  height: 100vh;
  background-color: #111720;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-items: flex-start;
  justify-content: flex-start;
  .nav {
    width: 100%;
    h2 {
      color: #fff;
      margin: 20px 10px;
      font-size: 18px;
      font-weight: 400;
    }


    &.bottom {
      align-self: flex-end;
    }

    .nav-list {
      list-style: none;
      padding: 0;
      width: 100%;
      .menu-divider{
        margin-left: 20px;
        border: 0;
        border-top: 1px solid rgba(236, 237, 239, 0.1);
      }
      .nav-list-item {
        width: 90%;
        padding-left: 10%;
        color: $text-color-light;
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        &.active {
          border-left: 5px solid $text-color-blue;
          color: $text-color-blue;
          padding-left: calc(10% - 5px);

          a {
            color: $text-color-blue;
          }
        }

        &:hover {
          border-left: 5px solid $text-color-blue;
          padding-left: calc(10% - 5px);
          transition: all 0.2s ease-in-out;
        }

        img {
          margin-right: 20px;
          width: 18px;
        }
        a {
          color: #fff;

          &:hover {
            color: $text-color-blue;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
          }
        }
        .inline {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }

  .dropdown-container {

    ul {
      list-style: none;
      margin-bottom: 0;
    }
    li {
      &.selected 
      {
        color: white !important; 
      }

      &:hover {
        border-left: 5px solid #111720 !important;
      }
    }
  }

}

HTML Example

<section class="nav-container">
  <div class="dropdown-container">
    <ul>
      <li class="selected">
        DROPDOWN WILL BE HERE
      </li>
    </ul>
</div>


  <div class="nav top">


    <ul class="nav-list">
      <li class="nav-list-item">
          <a><span class="inline">Nav Item 1</span></a>
      </li>

      <li class="nav-list-item">
          <a><span class="inline">Nav Item 1</span></a>
      </li>

    </ul>
  </div>
  <div  class="nav bottom">
    <ul class="nav-list">
      <li class="nav-list-item">
          <a><span class="inline">Nav Item 1</span></a>
      </li>
      <li class="nav-list-item">
          <a><span class="inline">Nav Item 1</span></a>
      </li>
    </ul>
  </div>
</section>

Any suggestions on how I can approach this? I have tried flex: 1 1 auto on the main nav.

I have also tried self justify bottom etc.

If I justify the items with space between, it's closer to being correct, but I dont want the space between item 1 and 2.