Angular Firefox Highcharts没有出现，但它'；它的镀铬和镶边都很好

下面的饼图显示在Chrome和Edge中，但在Firefox（最新版本88）中没有

我正在尝试水平对齐两个div。左边是表格，右边是图表

我省略了表单html中的所有细节，因为我认为它们不相关

我还尝试了

float:left

vs

float:none或
浮动：右
而不是
显示：内联块

  <div  style="display: inline-block;vertical-align:top;">
  <h2>{{title}}</h2>
  <form [formGroup]="rangeFormGroup">  
    <div>  
      <mat-form-field appearance="fill">  
      </mat-form-field> 
    </div>  
    <div>
      <mat-form-field appearance="fill">
      </mat-form-field> 
      <br>
      <mat-form-field appearance="fill">
      </mat-form-field> 
    </div>
  </form>
</div>
<div style="display: inline-block;height: 500px;width: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions[0]"
    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngular"
  ></highcharts-chart>
</div>

但也许这也不是原因（或者为什么它只影响firefox？
问题出在app.component.ts中

Firefox希望在图表选项中设置高度，如下所示

  options: Highcharts.Options[] = [{
    chart: {
      plotBackgroundColor: 'white',
      plotBorderWidth: undefined,
      plotShadow: false,
      type: 'pie',
      height: 500,  // FIREFOX WANTS THIS !!!
    },
    credits: {
      enabled: false

问题解决了，但在另一方面，人们也可以考虑
  options: Highcharts.Options[] = [{
    chart: {
      plotBackgroundColor: 'white',
      plotBorderWidth: undefined,
      plotShadow: false,
      type: 'pie',
      height: 500,  // FIREFOX WANTS THIS !!!
    },
    credits: {
      enabled: false