I am using angular infragistics^17.0.2 for my application and its having strange behavior. I have Igx-grid in my page and it has width 266px but still scroll bar is not coming at any cost but if i open any popup and close it out, the scroll bar is coming. I don't know what causing it. I have tried all workaround to set scroll bar explicitly but it has no fixed header and after open-close popup one more scroll bar is coming.

Can you please help me to fix this issue.

Note: it was working fine with previous version(11) but not in current version.

<div class="col-12 p-1 flex-column first_child flexContent1">
        <div class="location-grid">
          <igx-grid #ClearanceLocationGrid
                    id="ClearanceLocationGrid"
                    [autoGenerate]="false"
                    [data]="validatedLocations"
                    [rowSelection]="'multiple'"
                    (rowSelectionChanging)="onLocationGridRowSelectionChange($event)"
                    displayDensity="compact"
                    class="locationGridClass"
                    [primaryKey]="'locationStagingGuid'"
                    [isLoading]="loaderStatus$ | async"
                    (columnInit)="onColumnInit($event)">
            <igx-column header="Is Cleared?" field="isCleared" width="100">
              <ng-template igxCell let-cell="cell" let-value>
                <igx-checkbox [checked]="cell.row.data.isCleared" [disabled]="true"> </igx-checkbox>
              </ng-template>
            </igx-column>
            <igx-column header="Key" field="isPrimary" width="50">
              <ng-template igxCell let-cell="cell" let-value>
                <igx-checkbox [checked]="value" (change)="onLocationGridPrimaryKeyChange($event, cell)"> </igx-checkbox>
              </ng-template>
            </igx-column>
            <igx-column header="Address" width="1300" field="streetAddress">
              <ng-template igxCell let-cell="cell">
                <span *ngIf="cell.row.data.streetAddress !== null"> {{ cell.row.data.streetAddress }}, </span>
                <span *ngIf="cell.row.data.city !== null"> &nbsp;{{ cell.row.data.city }}, </span>
                <span *ngIf="cell.row.data.state !== null"> &nbsp;{{ cell.row.data.state }}, </span>
                <span *ngIf="cell.row.data.zip !== null"> &nbsp;{{ cell.row.data.zip }} </span>
              </ng-template>
            </igx-column>
            <igx-column header="TIV" field="tiv" width="250" dataType="number"> </igx-column>
          </igx-grid>
        </div>
      </div>