Polymer: make iron-pages flex and fill vertical area

Question

How can I make <iron-pages> flex and fill the viewport vertically of <--Main Content --> ?

The white bar at the bottom should be yellow:

 <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

Set height: 100% (flexbox is not needed for that).

iron-pages {
  height: 100%;
}

The page views of <iron-pages> should also have their containers set to height: 100% .