Resizing issue row-height in Chrome

[IbenTesara]

https://angular-3hmbxe.stackblitz.io/ https://stackblitz.com/edit/angular-3hmbxe

In the above example I've made a simplified version of our project.

On other browsers like Firefox, the height of .ui-content-div will enlarge when the content is enlarged by clicking on Larger, but will return to the original size when clicking on Smaller.

In Chrome, when you make the content larger by clicking on Larger, it will still get larger; however, when the content is made smaller by clicking on Smaller, .ui-content height does not return to the original size.

Best is to check this in both browsers with a small screen width, as it's a bit complicated to explain but quite noticeable visually.

[IbenTesara]

Some extra info on this :

The problem lies with the line grid-template-rows: minmax(calc(100vh - 200px), auto) 90px;. On Chrome it autoresizes to the height of the content, but does not resize back to the min-size once the content is smaller than the min-height we defined.

Left is Firefox, right is Chrome.