Fill page with iron-pages element

I'm trying to fill the entire page with an iron-pages element. With the following code I trying to create a page that looks like the following:

 -------------------------------------
| Top                                 |
 -------------------------------------
| Bottom                              |
|                                     |
|                                     |     
|                                     |
|                                     |
|                                     |       
 -------------------------------------

Code:

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/iron-pages/iron-pages.html">

    <style is="custom-style">
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: yellow;
        }
        div {
            border: 2px solid grey;
            background-color: white;
            margin: 2px;
        }
        p {
            margin: 5px;
        }
        .outer {
            width: 100%;
            height: 100%;
            @apply(--layout-vertical);
            @apply(--layout-flex);
        }
        .inner {
            @apply(--layout-flex);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div><p>Top</p></div>
        <iron-pages selected="0" class="inner">
            <div><p>Bottom</p></div>
        </iron-pages>
    </div>
</body>
</html>

However, the bottom section is not expanding to fill the available space.

If I remove the iron-pages element and add the inner style to the bottom div, I get the desired result.

Solved the issue. The iron-pages element needs to flex to take the available space (as it was) and then the content also need to flex to fill the full area.

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/iron-pages/iron-pages.html">

    <style is="custom-style">
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: yellow;
        }
        div {
            border: 2px solid grey;
            background-color: white;
            margin: 2px;
        }
        p {
            margin: 5px;
        }
        .outer {
            width: 100%;
            height: 100%;
            @apply(--layout-vertical);
            @apply(--layout-flex);
        }
        .inner {
            @apply(--layout-flex);
            @apply(--layout-vertical);
        }
        .content {
            @apply(--layout-flex);
        }
    </style>
</head>
<body>
    <div class="outer">
      <div><p>Top</p></div>
      <iron-pages selected="0" class="inner">
          <div class="content">
              <p>Bottom</p>
          </div>
      </iron-pages>
    </div>
</body>
</html>