GridPro and Grid can't auto adjust the height

Flow
1

Hi,

I am using GridPro and Grid in V14. I added a GridPro (Grid as well) to a Div and set the height as auto like the following:

Div silo = new Div();
GridPro<MyEntity> grid = new Grid<>();
grid.addThemeVariants( GridVariant.LUMO_COLUMN_BORDERS , GridVariant.LUMO_COMPACT );
grid.setHeight( "auto" );
.....
Button addRow = new Button( "Add" );
silo.add( grid, addRow);
.....

The browser console showed:

<div style="display: flex; flex-direction: column; width: 100%; height: auto;">
	<vaadin-grid-pro theme="column-borders compact" style="height: auto; touch-action: none" overflow="bottom" interacting>
	.....
	</vaadin-grid-pro>
	<vaadin-button>
	.....
	</vaadin-button>
</div>

However, the result was that the height space was very comparatively thin. When adding new rows, the grid height won’t grow automatically, but scrolling within the thin height. If I deleted the grid.setHeight( “auto” ), the grid height became comparatively large with a lot of blank space pre-allocated. Any suggestions of how to make the grid height more dynamic?

Best regards,
Joey