Question

我有widgets视图，其中之一是ag-grid。看起来像这样：

.flex-horizontal,
.flex-vertical,
.view,
.view>div,
app-view,
app-view>div {
  display: flex;
  flex: 1;
  flex-basis: auto;
  flex-direction: column;
}

.flex-horizontal,
.flex-vertical {
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex-item,
div.flex-horizontal {
  flex-direction: row;
}

.flex-item {
  flex: 1;
  flex-basis: auto;
}

.flex-horizontal>.flex-item {
  flex-basis: 0;
}

<div class="view">
  <div [class.flex-horizontal]="true">
    <app-legend class="flex-item">
    </app-legend>
    <app-legend class="flex-item">
    </app-legend>

    <div style="width: 100%">
      <app-grid style="margin-top: 12px; overflow: hidden;" class="flex-item" [readOnly]="false" [title]="Grid" [fillViewport]="false" [autoSizeColumns]="true">
      </app-grid>
    </div>
  </div>
</div>

我的农业网格：

<app-datagrid #grid class="ag-fresh" style="width: 100%;"
    [enableColResize]="enableColResize" [columnDefs]="columnDefs" [fillViewport]="fillViewport" [height]="height"
    [autoSizeColumns]="autoSizeColumns" [enableSorting]="enableSorting" [rowSelection]="rowSelection" [rowData]="model"
    (gridReady)="onGridReady($event)">
</app-datagrid>

问题是，ag-grid表无法正确缩放。当我缩小时，它的宽度会相应地改变并变长，但是当其他小部件在相同样式下也能正常工作时，它不会回缩并再次变小。我一直在尝试解决这一问题，但找不到正确的解决方案。如何调整缩放比例？

我也尝试过：

<div style="width: 100%">
                <app-grid
                    style="margin-top: 12px;" class="flex-item"
                    [readOnly]="false" [title]="Grid" [fillViewport]="false"
                    [autoSizeColumns]="true">
                </app-grid>
            </div>

但是有了这段代码，网格就一直不断地增长到宽度，甚至没有缩放。我在这里做错了什么？

带有ag-grid的div缩放后不会返回其宽度

0 个答案: