画面幅をリサイズするときにmd-toolbarが右から切り取られます

Question

アングル2にマテリアルデザインを使用していて、画面の幅を小さくするたびにバーが右から切り取られ、空白が追加されます。ここで navbar img small width

navar img original

私のコードは

<md-toolbar color="primary"> 
     <span> 
     Crayons and Clay</span> 
     <span class="fill-remaining-space"></span> 
     <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
      <button md-button routerLink='' >Home</button> 
      <button md-button routerLink='/ourschool' >Our School</button> 
      <button md-button routerLink='/communityevents'>Community Events</button> 
      <button md-button routerLink='/admission'>Admissions</button> 
      <button md-button routerLink='/contact'>Contact</button> 
     </div> 
     <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm> 
     <md-icon>menu</md-icon> 
     </button> 
    </md-toolbar> 
    <md-menu x-position="before" #menu="mdMenu"> 
     <button md-menu-item routerLink="/signin">Sign in</button> 
     <button md-menu-item routerLink="/dashboard">Inquiry</button> 
    </md-menu> 

<style> 
    .fill-remaining-space { 

     flex: 1 1 auto; 
    } 
</style> 

Answer 1

で0に100％の幅とflex-shrink & flex-growセットで別のdivの内側にあなたのmd-toolbarを入れても、あなたのツールバーのためmin-widthを設定します。

.fill-remaining-space { 
    flex: 1 1 auto; 
} 
.header { 
    min-width: 1024px; 
    width: 100%; 
    flex-shrink: 0; 
    flex-grow: 0; 
} 

...そしてあなたcomponent.htmlで：あなたのcomponent.cssで

ここ

<div class="header"> 
    <md-toolbar color="primary" layout-fill> 
     <span>Crayons and Clay</span> 
     <span class="fill-remaining-space"></span> 
     <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
      <button md-button routerLink=''>Home</button> 
      <button md-button routerLink='/ourschool'>Our School</button> 
      <button md-button routerLink='/communityevents'>Community Events</button> 
      <button md-button routerLink='/admission'>Admissions</button> 
      <button md-button routerLink='/contact'>Contact</button> 
     </div> 
     <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm> 
      <md-icon>menu</md-icon> 
     </button> 
    </md-toolbar> 
    <md-menu x-position="before" #menu="mdMenu"> 
      <button md-menu-item routerLink="/signin">Sign in</button> 
      <button md-menu-item routerLink="/dashboard">Inquiry</button> 
     </md-menu> 
</div> 

---

が作業plunkerです：DEMO