html {
  font-size: 14px;
}

#app {
  margin: 0;
  height: 100vh;
  overflow: auto;

  &>.admin-container {
    min-height: 100vh;

    @include flexbox;
    @include flex-direction(column);

    &>.admin-content-container,
    &>header {
      @include flexbox;
      @include flex-direction(row);

      &>#aside-nav,
      &>#site-logo {
        width: $left-menu-nav-width;
        background: $gray-darker;
        color: $gray-lightest;

        &>.nav-item {
          background: $gray-darker;
          color: $gray-lightest;
        }
      }

      &>#header-nav,
      &>main {
        @include flex(1, 0, auto);
      }
     
     &>main {
       @include flex-basis(0);
     }
    }

    &>.admin-content-container {
      @include flex(1, 0, auto);
    }

    @include media-breakpoint-down(sm) {
      &>.admin-content-container {
        position: relative;

        &>#aside-nav {
          display: none;

          &.aside-nav-active {
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
          }
        }
      }
    }
  }
}

html {
  font-size: 14px;
}

#app {
  margin: 0;
  height: 100vh;
  overflow: auto;

  &>.admin-container {
    min-height: 100vh;

    @include flexbox;
    @include flex-direction(column);

    &>.admin-content-container,
    &>header {
      @include flexbox;
      @include flex-direction(row);

      &>#aside-nav,
      &>#site-logo {
        width: $left-menu-nav-width;
        background: $gray-darker;
        color: $gray-lightest;

        &>.nav-item {
          background: $gray-darker;
          color: $gray-lightest;
        }
      }

      &>#header-nav,
      &>main {
        @include flex(1, 0, auto);
      }
     
     &>main {
       @include flex-basis(0);
       width: 0; /* to make sure the main container will never be larger than it should */
     }
    }

    &>.admin-content-container {
      @include flex(1, 0, auto);
    }

    @include media-breakpoint-down(sm) {
      &>.admin-content-container {
        position: relative;

        &>#aside-nav {
          display: none;

          &.aside-nav-active {
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
          }
        }
      }
    }
  }
}

Make sure the main container is always the same size
Make sure the main container is always the same size