title: Flexbox - How to split row 50/50 between two elements and wrap if width falls below min-width?
body: <p>I have a simple div which contains two mat-cards. Here are the CSS attributes of the div and of the cards inside the div:</p>
  <pre><code>.cards {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }
  
  mat-card {
    margin: 10px;
    width: 45%;
    min-width: 300px;
  }
  </code></pre>
  <p>Here is an example HTML template to reproduce the problem:</p>
  <pre><code>&lt;div class=&quot;cards&quot;&gt;
    &lt;mat-card&gt;
      &lt;mat-card-header&gt;
        &lt;mat-card-title&gt; Card 1 &lt;/mat-card-title&gt;
      &lt;/mat-card-header&gt;
      &lt;mat-card-content&gt;
        Name: Test 1 &lt;br /&gt;
        Type: Type 1 &lt;br /&gt;
        Property 1: 1 &lt;br /&gt;
        Property 2: 2 &lt;br /&gt;
        Property 3: 3 &lt;br /&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
    &lt;mat-card&gt;
      &lt;mat-card-header&gt;
        &lt;mat-card-title&gt; Card 2 &lt;/mat-card-title&gt;
      &lt;/mat-card-header&gt;
      &lt;mat-card-content&gt;
        Name: Test 2 &lt;br /&gt;
        Type: Type 2 &lt;br /&gt;
        Property 1: 1 &lt;br /&gt;
        Property 2: 2 &lt;br /&gt;
        Property 3: 3 &lt;br /&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want each of the cards to fill 50% of the row. If the min-width of the cards is too large to fit both cards into the row, the div content should wrap so the cards are now below each other. After the wrap, each card should fill 100% of the available width.</p>
  <p>With my current CSS layout, the content wraps way too early and I also can't seem to just set the width of the cards to 50% each because this causes it to wrap immediately. Here is a stackblitz which illustrates the problem:
  <a href="https://stackblitz.com/edit/angular-ivy-lw9mx4?file=src/app/app.component.css" rel="nofollow noreferrer">StackBlitz</a></p>
  <p>How can I get the desired behavior?</p>