角度Ngx图表不增加宽度

我有一个使用角度框架Ngx Charts的基本堆叠条形图,我希望当父div展开时,字符水平增长。我使用角弯曲将几张牌排成一行,然后一旦屏幕变小,每张牌应该占据屏幕的100%宽度,每张牌中都有一个图形。我目前的代码是这样的:

                <div
                    *ngIf="data.length > 0"
                    fxLayout="row"
                    fxLayout.lt-md="column"
                    fxLayoutGap="5px"
                  >
                    <mat-card *ngFor="let array of data"
                              fxFlex="0 1 0"
                              fxFlex.lt-md="0 1 100%"
                              fxFlex.lt-sm="100%"
                              class="max-height"
                    >
                      <mat-card-title style="font-size: 14px">
                        {{array.name}}
                      </mat-card-title>
                        <div style="height: 100%; width: 100%">
                          <ngx-charts-bar-horizontal-stacked
                            (window:resize)="onResize($event)"
                            [results]="array.data"
                            [showXAxisLabel]="true"
                            [showYAxisLabel]="true"
                            [yAxis]="true"
                            [xAxis]="true"
                            [xAxisTickFormatting]="formatXAxis"
                            (select)="chartClicked($event)"
                          >
                          </ngx-charts-bar-horizontal-stacked>
                        </div>
                    </mat-card>
                  </div>

没有固定的图表数量,所以可能有2个或10个或更多,但到目前为止一切正常,但当卡片增长到屏幕宽度的100%时,图表仍然保持较小,水平方向上的强度不足以适应新的卡片宽度。我将每个图表包装在一个div中,并将div设置为100%的宽度和高度,这样图表就可以自动缩放。