igx-pivot-data-selector causes grids to resize infinitely when inside container flex: 1 0 auto;

[RivaIvanova]

Description

All grids resize infinitely when placed inside a flex container with igx-pivot-data-selector inside it and grow/shrink/basis properties set to 1 0 auto.

If only the grids are placed in the same container, there is no resizing issue.

Originated from https://infragistics.visualstudio.com/Indigo_Platform/_workitems/edit/39595

• igniteui-angular version:
• browser:

Steps to reproduce

:host {
  display: flex;
}
.row-layout {
  display: flex;
  flex: 1 0 auto;
}

<div class="row-layout">
  <igx-pivot-grid [data]="financialTrading" [superCompactMode]="true" [defaultExpandState]="true" [autoGenerateConfig]="true" #pivotGrid></igx-pivot-grid>
  <igx-pivot-data-selector [grid]="pivotGrid"></igx-pivot-data-selector>
</div>

<div class="row-layout">
  <igx-grid [data]="financialTrading" [autoGenerate]="true"></igx-grid>

  <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true">
  </igx-tree-grid>

  <igx-hierarchical-grid [data]="localdata" [autoGenerate]="true">
    <igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="true">
    </igx-row-island>
  </igx-hierarchical-grid>

  <igx-pivot-data-selector></igx-pivot-data-selector> <!-- This will also cause the above grids to resize infinitely -->
</div>

GridsResizeInfinitely.zip

Result

Expected result

The overall resizing may be due to the container's flex settings flex: 1 0 auto;, however, the behavior should not be different when the igx-pivot-data-selector is present and not.
Grids should stay in one size (same behavior when only grids are placed in the container)

Attachments

Attach a sample if available, and screenshots, if applicable.

[github-actions]

There has been no recent activity and this issue has been marked inactive.