Полимер: сделать железные страницы гибкими и заполнить вертикальную область

Question

Как я могу сделать <iron-pages> flex и заполнить область просмотра по вертикали из <--Main Content -->?

Белая полоса в нижней части должен быть желтым:

<dom-module id="my-app"> 
    <template> 
    <style include="iron-flex iron-flex-alignment"> 
     :host { 
     --app-primary-color: var(--paper-indigo-500); 
     --app-secondary-color: black; 
     --iron-selector-background-color: #fff; 
     --iron-selected: #c5cae9; 
     --menu-link-color: #111111; 
     --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22); 
     --drawer-menu-color: #ffffff; 
     --secondary-text-color: #737373; 
     display: block; 
     } 

     app-header { 
     color: #fff; 
     background-color: var(--app-primary-color); 
     } 
     app-header paper-icon-button { 
     --paper-icon-button-ink-color: white; 
     } 

     .app-name { 
     margin-left: 20px; 
     font-size: 24px; 
     font-weight: 300; 
     } 

     [hidden] { 
     display: none; 
     } 

     .center { 
     @apply(--layout-vertical); 
     @apply(--layout-center-center); 
     } 

     .drawer-list a { 
     @apply(--layout-horizontal); 
     @apply(--layout-center); 
     line-height: 40px; 
     text-decoration: none; 
     color: var(--menu-link-color); 
     font-family: 'Roboto', 'Noto', sans-serif; 
     -webkit-font-smoothing: antialiased; 
     text-rendering: optimizeLegibility; 
     font-size: 14px; 
     font-weight: 400; 
     line-height: 24px; 
     min-height: 48px; 
     padding: 0 16px; 
     } 

     .drawer-list a.iron-selected { 
     color: var(--app-primary-color); 
     background: var(--iron-selected); 
     } 

     .left-bar-container { 
     height: 100%; 
     overflow: auto; 
     margin-top: 64px; 
     color: var(--secondary-text-color); 
     background-color: var(--drawer-menu-color); 
     } 

     .toolbar-drawer { 
     border-bottom: var(--drawer-toolbar-border-color); 
     @apply(--paper-font-title); 
     } 

     .spacer-line { 
     border-bottom: 1px solid rgba(0, 0, 0, 0.22); 
     padding: 10px 0 10px 0; 
     } 

     iron-icon { 
     margin-right: 33px; 
     opacity: 0.54; 
     } 

    </style> 

    <app-header-layout fullbleed has-scrolling-region> 
     <!-- Drawer content --> 
     <app-header fixed shadow> 
     <app-toolbar> 
      <paper-icon-button icon="menu" on-tap="_drawerToggle"></paper-icon-button> 
      <div main-title class="app-name">Dolphin</div> 
     </app-toolbar> 
     </app-header> 

     <app-drawer-layout fullbleed> 

     <!-- Drawer Sections --> 
     <app-drawer id="drawer" no-focus-trap="false"> 
      <div style="background: red" class='left-bar-container'> 

      <app-toolbar class="toolbar-drawer">Menu</app-toolbar> 
      <iron-selector selected="[[route]]" attr-for-selected="data-route" 
       class="drawer-list"> 
       <template is="dom-if" if="[[!loggedIn]]"> 
       <a data-route="user-login" href="/user-login"> 
        <iron-icon icon="input"></iron-icon><span>Login</span> 
       </a> 
       </template> 
       <template is="dom-if" if="[[loggedIn]]"> 
       <a data-route="user-login" 
        href="" 
        on-click="logout"> 
        <iron-icon icon="input"></iron-icon><span>Logout</span> 
       </a> 
       </template> 
       <a data-route="my-view1" href="/my-view1"> 
       <iron-icon icon="view-module"></iron-icon><span>my-view1</span> 
       </a> 
      </iron-selector> 

      <zipcode-search-drawer other-loading="{{isLoading}}" 
       other-pic="{{listings}}" hidden="[[!showMenu.myView1]]" 
       other-zip-code="{{browserZipCode}}"></zipcode-search-drawer> 

      </div> 
     </app-drawer> 

     <!-- Main content --> 
     <iron-pages attr-for-selected="data-route" selected="{{route}}"> 
      <user-login data-route="user-login"></user-login> 
      <my-view1 data-route="my-view1" form-loading="{{isLoading}}" 
      listings="[[listings]]" zip-code="{{browserZipCode}}" tabindex="-1"></my-view1> 
      <my-view3 data-route="my-view3"></my-view3> 
     </iron-pages> 

     </app-drawer-layout> 
    </app-header-layout> 

    <paper-toast id="drawerToast" duration="0"></paper-toast> 

    </template> 

Answer 1

Набор height: 100% (Flexbox не требуется для этого).

iron-pages { 
    height: 100%; 
} 

просмотры страницы из <iron-pages> должны также иметь их контейнеры установлены height: 100%.