title: Wrap material cards inside an ngFor
body: <p>I'm generating cards from an Api when user makes a search.</p>
  
  <p>I have film list component in which I show my cards</p>
  
  <p>here's the HTML</p>
  
  <pre><code>&lt;div fxLayout='row' fxLayoutWrap class="cards"&gt;
  
    &lt;div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results"&gt;
      &lt;mat-card&gt;
        &lt;mat-card-header&gt;
          &lt;mat-card-title&gt;{{film.title}}&lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;{{film.release_date}}
          &lt;/mat-card-subtitle&gt;
        &lt;/mat-card-header&gt;
        &lt;img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu"&gt;
        &lt;mat-card-content&gt;
          &lt;p&gt;
            {{film.overview}}
          &lt;/p&gt;
        &lt;/mat-card-content&gt;
        &lt;mat-card-actions&gt;
          &lt;button mat-button&gt;
            &lt;mat-icon&gt;favorite&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;button mat-button&gt;SHARE&lt;/button&gt;
        &lt;/mat-card-actions&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>.example-card {
      min-width: 100%;
      margin: 40px;
  
  }
  .cards {
      width: 400px;
  }
  </code></pre>
  
  <p>the services are working and also component ts logic.</p>
  
  <p>My problem is that material cards are not wrapping to a new line while I'm using <code>fxLayoutWrap</code> to wrap content when fxFlex get 100 of value.</p>
  
  <p>Here's a <a href="https://stackblitz.com/edit/angular-flex-layout-wrap?file=app/film-list/film-list.component.html" rel="nofollow noreferrer">stacklitz demo</a> ( I get an https error when I call the API, if someone could fix it I'll be grateful )</p>
  
  <p>Here's a screenshot of my problem</p>
  
  <p><a href="https://i.stack.imgur.com/GEzd3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GEzd3.jpg" alt="Image not wrapping"></a></p>