Невозможно получить строки для масштабирования в соответствии с содержанием

Question

Я пытаюсь добиться масштабирования строки в соответствии с наибольшим содержимым столбца.

Определение моей сетки:

<ag-grid-vue
  class="ag-theme-material grid-table"
  :gridOptions="gridOptions"
  @grid-ready="onGridReady"
  :columnDefs="columnDefs"
  :defaultColDef="defaultColDef"
  :autoGroupColumnDef="autoGroupColumnDef"
  :rowModelType="rowModelType"
  :functionsReadOnly="true"
  :domLayout="domLayout"
  :frameworkComponents="frameworkComponents"
  :sideBar="sideBar"
  :paginationPageSize="paginationPageSize"
  :animateRows="true"
  :debug="true"
  :pagination="true">
</ag-grid-vue>

Моя конфигурация:

 beforeMount() {
      this.gridOptions = {};
      this.paginationPageSize = 50;
      this.context = {componentParent: this};
      this.columnDefs = [
        {
          headerName: "Avatar",
          field: "avatar",
          autoHeight: true,
          sortable: false,
          cellRenderer: "avatarRenderer"
        },
        {
          headerName: "Full name",
          field: "fullName"
        },
        {
          headerName: "Address",
          field: "address",
          sortable: false,
          cellClass: "cell-wrap-text",
          autoHeight: true,
          cellRenderer: "addressRenderer"
        },
        {
          headerName: "City",
          field: "city"
        },
        {
          headerName: "State",
          field: "state"
        },
        {
          headerName: "Zip",
          field: "zip"
        }
      ];
      this.frameworkComponents = {
        addressRenderer: AddressCell,
        avatarRenderer: AvatarCell,
      };
      this.defaultColDef = {
        width: 100,
        sortable: true,
        resizable: true
      };
      this.rowModelType = "serverSide";
      this.domLayout = "autoHeight";
      this.sideBar = {
        toolPanels: [
          {
            id: "columns",
            labelDefault: "Columns",
            labelKey: "columns",
            iconKey: "columns",
            toolPanel: "agColumnsToolPanel",
            toolPanelParams: {
              suppressPivots: true,
              suppressPivotMode: true,
              suppressValues: true
            }
          }
        ]
      };
      this.rowModelType = "serverSide";
      this.rowGroupPanelShow = "never";
      this.autoGroupColumnDef = {width: 150};
    },

И например AvatarCell:

import Vue from "vue";

export default Vue.extend({
  template: `
       <div class="avatar-container">
          <img :src="avatarUrl" class="img-avatar" alt="">
       </div>
    `,
  data: function () {
    return {};
  },
  beforeMount() {
  },
  computed: {
    avatarUrl: function () {
      return this.params.value;
    }
  },
  mounted() {
  },
  methods: {}
});

И я не могу масштабировать строки в соответствии с содержимым.Он обрезает содержимое и имеет размер 48 пикселей.

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