title: How to apply "position: sticky" to an angular-material card in a flex-layout?
body: <p>I'm trying to get an angular-material card to be sticky. Problem is it didn't seem to work, and I don't get why.</p>
  
  <p>Is it because the parent component got a FxLayout ? I couldn't get my card to be sticky, here my code:</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section fxLayout="row" fxLayoutGap="5%"&gt;
    &lt;article class="progress-card" fxFlex="30"&gt;
      &lt;mat-card fxLayout="column" fxLayoutAlign="center center"&gt;
        &lt;mat-card-title&gt;&lt;h2&gt;PROGRESSION&lt;/h2&gt;&lt;/mat-card-title&gt;
        &lt;mat-card-content&gt;
          &lt;p&gt;Text here&lt;/p&gt;
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/article&gt;
    &lt;article fxFlex="70" fxLayout="column"&gt;
      &lt;mat-card&gt;
        &lt;mat-card-title&gt;&lt;h2&gt;CONTENT&lt;/h2&gt;&lt;/mat-card-title&gt;
        &lt;mat-card-content&gt;
          &lt;p&gt;Text here&lt;/p&gt;
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.progress-card {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
  }
  </code></pre>
  
  <p>I'd like to get the "progress-card" to stay sticky on the top of the screen as I scroll down to read the other card content.</p>
  
  <p>Thanks for your help and your time.</p>