title: Polymer Layout - Scrolling Content
body: <p>I am building a full-screen app with Polymer. Currently, I've defined my layout like this:</p>
  
  <pre><code>  &lt;body unresolved class="fullbleed"&gt;
      &lt;template is="dom-bind" id="app"&gt;
        &lt;paper-scroll-header-panel fixed&gt;
          &lt;paper-toolbar&gt;
            &lt;div class="spacer title" style="margin-left:0px;"&gt;My App&lt;/div&gt;        
  
            &lt;paper-icon-button icon="search"&gt;&lt;/paper-icon-button&gt;
            &lt;paper-icon-button icon="more-vert"&gt;&lt;/paper-icon-button&gt;
          &lt;/paper-toolbar&gt;
  
          &lt;paper-drawer-panel id="paperDrawerPanel"&gt; 
            &lt;div drawer&gt;
              &lt;my-nav flex&gt;&lt;/my-nav&gt;            
            &lt;/div&gt;       
            &lt;div main class="content"&gt;
              &lt;my-view&gt;&lt;/my-view&gt;
            &lt;/div&gt;
          &lt;/paper-drawer-panel&gt;
        &lt;/paper-scroll-header-panel&gt;      
      &lt;/template&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>The view in <code>&lt;div main class="content"&gt;</code> looks like this:</p>
  
  <p><strong>my-view.html</strong></p>
  
  <pre><code>  &lt;dom-module id="project-view"&gt;    
      &lt;template&gt;
        &lt;neon-animated-pages class="flex" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation"&gt;
          &lt;!-- Page 1 --&gt;
          &lt;div&gt;
            &lt;paper-header-panel mode="seamed"&gt;
              &lt;div class="paper-header"&gt;
                &lt;paper-toolbar class="view-toolbar"&gt;
                  &lt;paper-icon-button icon="menu"&gt;&lt;/paper-icon-button&gt;             
                  &lt;span class="flex"&gt;&lt;/span&gt;      
                  &lt;paper-icon-button icon="menu"&gt;&lt;/paper-icon-button&gt;             
                &lt;/paper-toolbar&gt;              
              &lt;/div&gt;
  
              &lt;div class="content"&gt;
                &lt;paper-material elevation="2"&gt;
                  &lt;h1&gt;Welcome&lt;/h1&gt;
                  &lt;p&gt;
                     This will be a BIG text block that require scrolling. The toolbar should always be visible. The "paper" should scroll under the toolbar like a Google Doc
                  &lt;/p&gt;
                &lt;/paper-material&gt;
              &lt;/div&gt;
            &lt;/paper-header-panel&gt;
          &lt;/div&gt;
  
          &lt;!-- Page 2 --&gt;
          &lt;div&gt;
            &lt;paper-material elevation="2"&gt;
              &lt;p&gt;Another page&lt;/p&gt;
            &lt;/paper-material&gt;
          &lt;/div&gt;
        &lt;/neon-animated-pages&gt;
  
        &lt;script&gt;
          Polymer({
            is: "my-view",
            ready: function() {
              this.selectedPageIndex = 0;
            }
          });
        &lt;/script&gt;
      &lt;/template&gt;
    &lt;/dom-module&gt;
  </code></pre>
  
  <p>When I run this page, the content under the toolbar will not scroll. It stays fixed in position. I do not understand why. How do I create some paper under a toolbar so that it scrolls beneath the toolbar like Google Docs?</p>
  
  <p><strong>Update</strong>:</p>
  
  <p>Main layout changed to:</p>
  
  <pre><code>  &lt;paper-header-panel class="flex" style="background-color:lightcoral;"&gt;
      &lt;paper-toolbar&gt;
        &lt;div class="spacer title" style="margin-left:0px;"&gt;My App&lt;/div&gt;        
  
        &lt;paper-icon-button icon="search"&gt;&lt;/paper-icon-button&gt;
        &lt;paper-icon-button icon="more-vert"&gt;&lt;/paper-icon-button&gt;
      &lt;/paper-toolbar&gt;
  
      &lt;div class="flex content" style="background-color:lightsalmon;"&gt;
        &lt;div class="horizontal layout"&gt;
          &lt;div drawer&gt;
            &lt;my-nav flex&gt;&lt;/my-nav&gt;            
          &lt;/div&gt;       
          &lt;div main class="content"&gt;
            &lt;my-view&gt;&lt;/my-view&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/paper-header-panel&gt;
  </code></pre>
  
  <p>The content scrolls. However, the content of the paper-drawer-panel does not fill the remaining area below the toolbar. I do not understand why. It's like the iron-flex-layout stuff isn't working. What am I doing wrong?</p>