Overflow-x：滚动在 Chrome 浏览器上不起作用（滚动条不随网格内容移动）

Question

我使用 ag-grid 定义了一个带有水平滚动条的网格。当我单击左侧或右侧间隔符时，只有滚动条移动，但网格内容不移动。 Chrome、Edge 都会出现此问题。

它不适用于我尝试过的任何 CSS 样式。此外，我编写了特定于浏览器的代码，但它不起作用。滚动条应该随着网格内容移动

添加以下文件以方便理解 下面我展示了我的网格结构

'''

<div class="main-grid" id="mainGrid">
    <div class="data-grid-content">
        <div class="ag-root-wrapper">
            <div class="ag-root-wrapper-body" ref="rootWrapperBody">
                <div class="ag-root" role="grid" unselectable="on" ref="gridPanel">
                    <!-- Horizontal scroll bar -->
                    <div class="ag-body-horizontal-scroll style-scope eds-data-grid" style="height: 15px; max-height: 15px; min-height: 15px;">
                        <div class="ag-body-horizontal-scroll-viewport" style="height: 15px; max-height: 15px; min-height: 15px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

'''

这是 styles.css （主要样式来自 ag-grid-community 包）

            div.main-grid  {
margin: 0 20px;
height: 85vh;
overflow: auto;
flex-direction: column;
border: 1px solid #cccccc;
border-radius: 6px;
    }
    .data-grid-content {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
    }
    .ag-root-wrapper {
height: 100%;
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
    }
    .ag-root-wrapper-body {
-webkit-box-flex: 1;
flex: 1;
overflow: hidden;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
    }
    .ag-root {
border: none;
height: 100%;
overflow: hidden;
min-width: 0px;
-webkit-box-flex: 1;
flex: 1;
cursor: default;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: static !important;
    }
    .ag-body-horizontal-scroll {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
min-width: 0;
width: 100%;
display: flex;
position: relative;
    }
    ag-body-horizontal-scroll-viewport {
overflow-x: scroll;
position: relative;
min-width: 0px;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-box-direction: normal;
flex: 1 1 auto;
white-space: nowrap;
    }
    

  

Answer 1

如果没有重新生成代码，我们将很难为您提供帮助。但你可以尝试：

1. 为网格容器设置overflow-x auto：

.container {   overflow-x: auto; }  

2. 将 domLayout 更改为“autoHeight”：

gridOptions: {   
    domLayout: 'autoHeight', // or 'autoHeight,pagination' if using pagination   
    // Other grid options... 
}