Flex height table pushes parent splitter panel as it grows

[russfleming]

I have found that a PrimeNG 11 table that is placed within a PrimeNG Splitter panel and has rows added to it at runtime pushes the parent splitter panel up to crowd out the panel above it as it grows, basically overflowing the containing panel.

My page has a horizontal splitter with a panel on top for various activities and a panel on the bottom where the table is to show events as they occur.

As elements are added to the table in the lower splitter panel, the table grows in height to fill the splitter panel, then pushes the dividing bar up to crowd out the upper splitter panel. Once that has moved up as much as it can, it then overflows down and out of the lower splitter panel uncontrolled.

My question is how to constrain the table to stay in the splitter panel and adjust to whatever the splitter height is as it is moved up and down, but to not change the splitter panel height automatically.

I have seen the PrimeNG example on how to make a table grow and scroll within a parent container (see https://www.primefaces.org/primeng/show ... ble/scroll).

When in a splitter panel, the table does not seem to respect the size of the panel height as it does in the PrimeNG example.

I have created an example project that displays this behavior. There are two tabs, the first shows the splitter panels with the table growing and resizing automatically. The other panel duplicates the desired behavior and is taken from the PrimeNG table scroll example.

https://stackblitz.com/github/russfleming/splitter

I am hoping that I have missed some configuration or style option to make the table grow within the splitter panel without automatically resizing the panel.

My project uses Angular 9 and PrimeNG 11. Documentation for the PrimeNG splitter is at https://www.primefaces.org/primeng/showcase/#/splitter