Как сделать высоту столбца bootstrap 4 такой же, как высота строки

Question

Я создал этот макет в Angular 9, используя Bootstrap 4 классы строк и столбцов. Диаграммы создаются библиотекой Chart. js.

По какой-то причине я не могу получить столбцы в каждой строке одинаковой высоты, поэтому я пришел сюда за помощью.

Разметка макета

 <div class="container mb-2">
    <div class="row" *ngFor="let row of rows">
      <div [ngClass]="{'col': component.cols == 4, 'col-9': component.cols == 3, 'col-6': component.cols == 2, 'col-3': component.cols == 1}" *ngFor="let component of row">
        <app-chart></app-chart>
      </div>
    </div>
 </div>

Разметка компонента

<div class="container-fluid my-1 component-shadow rounded-lg">
  <div class="row border">
    <div class="col pt-1">
      <div class="h5 text-center">Some Chart</div>
    </div>
  </div>
  <div class="row border-left border-right border-bottom">
    <div class="col py-2">
      <canvas
      baseChart
        width="400"
        height="200"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [chartType]="chartType"
      >
      </canvas>
    </div>
  </div>
</div>

Классы столбцов определяются условиями в * ngClass

Answer 1

Можете ли вы проверить с ниже css, надеюсь, это будет работать для вас.

.row { display : flex; flex-wrap :wrap; }

Answer 2

Nevermind. Все, что мне нужно было сделать, это установить для параметра keepAspectRatio в ChartOptions значение false.