title: Using FlexLayout the content collapses instead of shrinking and covering the available width
body: <p>Am Using Angular and the flex Layout to create a dashboard, each time to I open the navigation, the items don't shrink as expected and end up pushing the last to the next line.I have the parent component HTML to be </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
  class="cards-section"
  fxLayout="row wrap"
  fxLayout.lt-sm="column"
  fxLayoutAlign="flex-start"
  fxLayoutGap="32px"
  &gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Qxxuc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qxxuc.png" alt="photo_1"></a></p>
  
  <p>Component HTML is </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-dashboard-chart
    class="chart-bg bar-chart"
    fxFlex="0 1 calc(50% - 32px)"
    fxFlex.lt-md="0 1 calc(50% - 32px)"
    fxFlex.lt-sm="100%"
    &gt;
  </code></pre>
  
  <p>It breaks to the next line as shown below, am using apex charts for the charts</p>
  
  <p><a href="https://i.stack.imgur.com/je4WI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/je4WI.png" alt="enter image description here"></a></p>