title: Div heights inside Core Drawer Panel are fixed?
body: <p>I have a set of material design cards that look fine on their own, but when I put them inside a Core Drawer Panel, it looks like div heights are getting fixed. I'm trying to find a solution for the way they're getting compacted vertically. </p>
  
  <p>This is what it looks like outside the Core Drawer Panel: </p>
  
  <p><a href="https://i.stack.imgur.com/vwGIJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vwGIJ.png" alt="Material design card"></a> </p>
  
  <p>This is what 3 cards look like inside the Core Drawer Panel (not showing that actual left-hand drawer, but that looks fine):</p>
  
  <p><a href="https://i.stack.imgur.com/mf5yE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mf5yE.png" alt="enter image description here"></a></p>
  
  <p>Here's a simplified version of my code (polymer imports not displayed): </p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          #mainDiv {
          background-color: transparent;
          overflow: scroll;
          }
          #mainDiv * {
          font-family: 'Roboto', sans-serif;
          background: #eee;
          height: 100%;
          width: 100%;
          padding: 40px;
          margin: 0;
          color: #2E2E3C;
          line-height: 24px;
          -webkit-font-smoothing: antialiased;
          }
          #mainDiv * {
              box-sizing: border-box;
              -webkit-tap-highlight-color: transparent;
              text-rendering: optimizeLegibility;
          }
  
          #mainDiv *::-moz-selection {
              color: #CFD8DC;
              background: #009688;
          }
  
          #mainDiv * ::selection {
              color: #CFD8DC;
              background: #009688;
          }
  
          #mainDiv * ::-webkit-scrollbar {
              width: 10px!important;
              background: #FAFAFA;
          }
  
          #mainDiv * ::-webkit-scrollbar-track {
              background: rgba(255, 255, 255, .08);
          }
  
          #mainDiv * ::-webkit-scrollbar-thumb {
              background-color: rgba(0, 0, 0, .2);
          }
          /* End defaults*/
  
          #mainDiv .card {
              display: block;
              vertical-align: top;
              width: 350px;
              position: relative;
              overflow: hidden;
              margin: 10px;
              background: #FFF;
              box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
              color: #272727;
              border-radius: 2px;
          }
          #mainDiv .card .title {
              line-height: 48px;
              font-size: 24px;
              font-weight: 300;
          }
          #mainDiv .card .content {
              padding: 20px;
              font-weight: 300;
              border-radius: 0 0 2px 2px;
          }
          #mainDiv .card p {
              margin: 0;
          }
          #mainDiv .card .action {
              border-top: 1px solid rgba(160, 160, 160, 0.2);
              padding: 20px;
          }
          #mainDiv .card a {
              color: #ffab40;
              margin-right: 20px;
              -webkit-transition: color 0.3s ease;
              transition: color 0.3s ease;
              text-transform: uppercase;
              text-decoration: none;
          }
          #mainDiv .card .image {
              position: relative;
          }
          #mainDiv .card .image img {
              border-radius: 2px 2px 0 0;
              position: relative;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              width: 100%;
          }
          #mainDiv .card .image .title {
              position: absolute;
              bottom: 0;
              left: 0;
              padding: 20px;
              color: #FFF;
          }
          #mainDiv .checkBoxSpan {
              float: right;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;core-drawer-panel&gt;
          &lt;div drawer&gt;    
              &lt;!— bunch of dropdown menus —&gt;
          &lt;/div drawer&gt;
  
          &lt;div main id="mainDiv" layout vertical&gt;
  
              &lt;div class="card"&gt;
                  &lt;div class="content"&gt;
                      &lt;span class="title"&gt;Card title&lt;/span&gt;
                      &lt;p&gt;I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="action"&gt;
                      &lt;a href='#'&gt;This is a link&lt;/a&gt;
                      &lt;a href='#'&gt;This is a link&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/core-drawer-panel&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>For reference, the material card code is from here: <a href="http://materialdesignblog.com/10-material-design-cards-for-web-in-css-html/" rel="nofollow noreferrer">http://materialdesignblog.com/10-material-design-cards-for-web-in-css-html/</a></p>