AG Grid横向滚动条异常：滚动条溢出容器显示在页面底部

你遇到的问题核心是**domLayout: 'autoHeight'的特性和容器滚动需求冲突**：

• 开启autoHeight时，AG Grid会自动调整自身高度适配所有行，同时强制Grid宽度尽可能撑满父容器的可用空间。一旦列总宽度超过视口，横向滚动条会被放到页面全局滚动区，而非你的.grid-container容器内。
• 这导致Grid突破容器宽度限制，容器的overflow: auto失效，滚动条跑到页面底部，且Grid宽度超出屏幕后，最后几列无法正常查看。

1. 移除domLayout: 'autoHeight'配置 #

这个配置的设计目标就是让Grid脱离容器滚动，和你需要的容器内滚动完全矛盾，必须移除。

2. 调整Grid与容器的配置 #

• 保持容器CSS不变，确保容器有明确宽高和溢出处理：

.grid-container {
  width: 50%;
  height: 400px;
  overflow: auto;
}

• 在Grid配置中设置height: '100%'，让Grid占满容器高度：

// 示例Grid配置
const gridOptions = {
  // 移除 domLayout: 'autoHeight'
  height: '100%',
  columnDefs: [/* 你的50列配置 */],
  // 其他配置...
};

• 确保app-some-grid组件能继承容器宽度，或在组件内部给AG Grid设置width: '100%'。这样当列总宽度超过容器宽度时，容器会自动显示横向滚动条。

3. 特殊场景处理（需自适应高度+容器滚动） #

如果确实需要Grid高度自适应行内容，但又要在容器内滚动，可以放弃autoHeight，改用以下方式：

• 监听AG Grid的modelUpdated事件，获取Grid实际内容高度
• 动态设置容器的max-height，当内容高度超过容器固定高度时，触发overflow: auto显示滚动条
  示例代码：

gridOptions = {
  onModelUpdated: params => {
    const rowHeight = params.api.getRowHeight();
    const totalRowHeight = params.api.getDisplayedRowCount() * rowHeight;
    const headerHeight = 50; // 可根据实际表头高度调整
    const container = document.querySelector('.grid-container');
    // 内容高度超过400px时，容器固定为400px并显示滚动条；否则自适应高度
    container.style.maxHeight = `${Math.min(totalRowHeight + headerHeight, 400)}px`;
  },
  // 其他配置...
};

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