css - Navbar: layout-align="space-between stretch" doesn't behave correctly -

i'm trying align of links on top of navbar , of them (logout, enter fullscreen) @ bottom:

but can see doesn't work. html code navbar:

<section layout="row" flex>     <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex>         <md-toolbar class="md-theme-indigo" layout="row">             <h1 class="md-toolbar-tools">menu</h1>             <span flex></span>             <md-button class="md-icon-button" aria-label="close" ng-click="close()">                 <md-icon md-svg-icon="assets/img/closenavbar.svg"></md-icon>             </md-button>         </md-toolbar>         <div layout="column" layout-align=" center">             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">overview</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseoverview">cases</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errortotal">total errors</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalvehicles">total vehicles</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errortotaldonuts">error types</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapcluster">map</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.maplive">live map</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">manufacturers</md-button>         </div>          <div layout="column" layout-align=" center" flex>             <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">logout</md-button>             <md-button ng-click="togglefullscreen()" layout-align=" center" style="text-align:left">{{fullscreenbuttonlabel}}</md-button>         </div>      </md-sidenav>  </section> 

i tried add "height:100%" css divs accomplished unnecessary scrollbar appeared. have change make alignment possible?

try this, hope helping you.

<section layout="row" flex>     <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" layout-align="space-between stretch" flex>         <md-toolbar class="md-theme-indigo" layout="row">             <h1 class="md-toolbar-tools">menu</h1>             <span flex></span>             <md-button class="md-icon-button" aria-label="close" ng-click="close()">                 <md-icon md-svg-icon="assets/img/closenavbar.svg"></md-icon>             </md-button>         </md-toolbar>         <div layout="column" layout-align=" center">             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.overview">overview</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.caseoverview">cases</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errortotal">total errors</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.totalvehicles">total vehicles</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.errortotaldonuts">error types</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.mapcluster">map</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.maplive">live map</md-button>             <md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="insurance.manufacturers">manufacturers</md-button>         </div>          <div class="logout" layout="column" layout-align=" center" flex>             <md-button ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="login">logout</md-button>             <md-button ng-click="togglefullscreen()" layout-align=" center" style="text-align:left">{{fullscreenbuttonlabel}}</md-button>         </div>      </md-sidenav>  </section>  .md-sidenav-left{ position:relative; }  .logout{   position:absolute;   bottom:0; }