如何让AG Grid自定义单元格渲染器占满单元格空间？

在Angular项目中使用AG Grid表格，为某字段创建了自定义单元格渲染器组件。需要让渲染器内的span元素占满整个单元格空间——目前给span设置了红色背景，但并未填满整个单元格，同时span的scrollWidth属性始终为0，而对应单元格的div元素scrollWidth为正。

span默认是行内元素，无法直接占满容器空间，需要通过调整CSS布局属性实现占满效果，同时解决scrollWidth为0的问题：

方法1：将span转为块级元素 #

给span添加块级显示属性，同时设置宽高100%并清除默认内外边距：

span {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免内边距超出容器范围 */
}

方法2：使用行内块元素（保留行内特性） #

如果需要保留span的行内元素特性，可设置为行内块并占满空间：

span {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

方法3：利用Flex布局实现居中+占满 #

如果需要让内部元素（比如示例中的img）自动居中，可使用Flex布局：

span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  selector: 'day-component',
  template: `
    <span class="full-cell-span">
      <img *ngFor="let number of value" [src]="rendererImage" />
    </span>
  `,
  styles: [`
    .full-cell-span {
      display: block;
      width: 100%;
      height: 100%;
      background-color: red;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* 可选：添加Flex实现内部图片居中 */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .full-cell-span img {
      /* 可选：限制图片大小避免超出容器 */
      max-width: 100%;
      max-height: 100%;
    }
  `]
})
export class DaysFrostRenderer implements ICellRendererAngularComp {
  params!: ICellRendererParams & { rendererImage: string };
  rendererImage!: string;
  value!: any[];

  agInit(params: ICellRendererParams & { rendererImage: string }): void {
    this.params = params;
    this.updateImage();
  }

  updateImage() {
    this.rendererImage = `https://www.ag-grid.com/example-assets/weather/${this.params.rendererImage}`;
    this.value = new Array(this.params.value).fill(0);
  }

  refresh(params: ICellRendererParams & { rendererImage: string }) {
    this.params = params;
    this.updateImage();
    return true;
  }
}

补充说明 #

调整span的布局属性后，它会完全填充单元格容器，此时scrollWidth会和单元格div的scrollWidth保持一致，解决之前值为0的问题。

内容的提问来源于stack exchange，提问作者arunkumaraqm