title: Angular 4 - how to make a mat-card fill entire parent component area
body: <p>I have a <code>mat-grid-tile</code> (parent) which contains a component <code>app-window</code> (child), which contains a <code>mat-card</code> at its root.</p>
  
  <p>The <code>app-window</code> fills the <code>mat-grid-tile</code> as desired and is center-aligned both vertically and horizontally. Now I want the <code>app-window</code>'s <code>mat-card</code> to do the same so that I can have a grid of equally spaced <code>mat-card</code>s.</p>
  
  <p>How can I get the <code>mat-card</code> contained within <code>app-window</code> to fill the entire <code>app-window</code>? I have tried some ideas but none were successful; more details below.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-3zvypv" rel="noreferrer"><strong>StackBlitz example</strong></a></p>
  
  <p>Component HTML:</p>
  
  <pre><code>&lt;mat-grid-list cols="3" rowHeight="4:3"&gt;
    &lt;mat-grid-tile&gt;
      &lt;app-window&gt;&lt;/app-window&gt;
    &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p>Component CSS:</p>
  
  <pre><code>app-window {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  </code></pre>
  
  <p>Attempted solutions and their results:</p>
  
  <ul>
  <li>Setting the <code>app-window</code>'s <code>mat-card</code>'s width to a <code>width</code> and <code>height</code> of 100%. This makes the <code>mat-card</code> slightly larger than the <code>mat-grid-tile</code> that contains it. The desired behaviour would have been to match the size of the <code>app-window</code>.</li>
  <li>Not assigning any extra CSS properties to the <code>mat-card</code>. As a result, the <code>mat-card</code> occupies the <code>app-window</code>'s entire width but is only as tall as its content. I want it to always be the same height as the <code>app-window</code>.</li>
  <li>Assigning the property <code>flex-grow: 1;</code> to the <code>mat-card</code>. Based on my understanding, this should make the <code>mat-card</code> fill the entire space of the <code>app-window</code>, i.e. its parent container. However, there is no effect and the result is the same as the second solution's.</li>
  </ul>