Charts will not resize with container

I am using an ng2 Line Chart inside of a custom container to look like a mat-card. When the nav panel is hidden and displays the whole page the container resizes but the charts do not. If I put them on their own row they resize but next to each other they do not. For UI purposes I want to keep them side by side.

Before:



After:



This is the code for the charts

<div class="flex-item">
<div style="display: block;">
<canvas
baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[legend]="false"
[colors]="lineChartColors"
[chartType]="lineChartType"
></canvas>
</div>
</div>
</div>


This is the css for the container

.falseCard {
background-color: white;
padding: 1em;
width: 100%;
display: flex;
border-radius: 4px;
}


html for the page it is on

<div fxLayout="row" fxLayoutGap="16px">
<div class="falseCard mat-elevation-z2"><ls-new-users-chart-widget></ls-new-users-chart-widget></div>
<div class="falseCard mat-elevation-z2"><ls-active-users-chart-widget></ls-active-users-chart-widget></div>
</div>

Continue reading...