如何设置Angular igx-grid高度适配内容并超限时显示滚动条？

问题场景 #

当前使用Ignite UI的igx-grid组件，期望实现：

• 网格高度自适应内容行数
• 当内容高度超过父容器（.layout-container）的100%高度时，自动显示垂直滚动条

但遇到两个问题：

• 设置height:100%时，网格会强制占满容器高度，即便内容行数不足
• 设置height:auto时，网格仅显示第一行高度，无法自适应所有内容

原始HTML代码：

<div class="layout-container">
  <div class="rhi-grid-wrapper" style="width: 40%;">
    <igx-grid *ngIf="!setUp" [data]="factoredEstimateTemplateList" [rowStyles]="rowStyles" style=" overflow-y: auto;">
      <igx-column field="name" header="Name" [width]="'50%'"></igx-column>
      <igx-column field="total" header="Total" [width]="'50%'" dataType="number">
        <ng-template igxCell let-val>
          <div class="cell__inner">
              {{ val | number: '1.0-0' }}
          </div>
        </ng-template>
      </igx-column>
    </igx-grid>
  </div>

  <div *ngIf="!setUp && chartData && chartData.length!=0" class="chart-container" height="25%" style="padding-top: 1rem; width: 60%;">
    <igx-category-chart *ngIf="darkTheme;else lightThemeChart"
    name="chart" #chart chartType="Column" [dataSource]="chartData" [legend]="" width="900px" height="100%"
    yAxisMinimumValue="0" yAxisTitle="Total" yAxisTitleLeftMargin="10" yAxisTitleRightMargin="5" yAxisLabelLeftMargin="0" yAxisLabelTextColor="#FFFFFF" yAxisTitleTextColor="#FFFFFF"
    xAxisGap="1" xAxisLabelTextColor= "#FFFFFF"
    isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" isCategoryHighlightingEnabled="true"
    highlightingMode="FadeOthersSpecific" highlightingBehavior="NearestItemsAndSeries" crosshairsDisplayMode="None"
    brushes="#AD4699"
    style="margin:auto">
    </igx-category-chart>

    <ng-template #lightThemeChart>
      <igx-category-chart
      name="chart" #chart chartType="Column" [dataSource]="chartData" [legend]="" width="900px" height="100%"
      yAxisMinimumValue="0" yAxisTitle="Total" yAxisTitleLeftMargin="10" yAxisTitleRightMargin="5" yAxisLabelLeftMargin="0" yAxisLabelTextColor="#000000" yAxisTitleTextColor="#000000"
      xAxisGap="1" xAxisLabelTextColor= "#000000"
      isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" isCategoryHighlightingEnabled="true"
      highlightingMode="FadeOthersSpecific" highlightingBehavior="NearestItemsAndSeries" crosshairsDisplayMode="None"
      brushes="#AD4699"
      style="margin:auto">
      </igx-category-chart>
    </ng-template>
  </div>
</div>

原始.layout-container CSS：

.layout-container {
  display: flex;
  justify-content: space-between;
  height: 50%;
}

解决方案 #

1. 调整网格容器样式 #

给.rhi-grid-wrapper添加高度限制，确保它不会超出父容器的高度范围：

.rhi-grid-wrapper {
  width: 40%;
  max-height: 100%;
  overflow: hidden;
}

2. 配置igx-grid的自适应高度属性 #

利用Ignite UI内置的autoHeight属性让网格自适应内容，同时设置最大高度和滚动规则：

<igx-grid *ngIf="!setUp" 
          [data]="factoredEstimateTemplateList" 
          [rowStyles]="rowStyles"
          [autoHeight]="true"
          style="max-height: 100%; overflow-y: auto;">
  <!-- 列定义保持不变 -->
</igx-grid>

3. 覆盖组件默认最小高度（可选） #

如果设置后仍只显示一行，可能是组件内置样式限制，添加以下CSS强制覆盖：

igx-grid {
  min-height: auto !important;
}

原理说明 #

• [autoHeight]="true" 让igx-grid根据内容行数自动计算高度，不再强制占满容器
• max-height:100% 限制网格最大高度不超过父容器，避免破坏整体布局
• overflow-y:auto 在内容高度超过最大限制时，自动触发垂直滚动条
• 父容器.rhi-grid-wrapper的max-height:100%确保它继承.layout-container的高度约束

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