Primeflex + PrimeNG tab + PrimeNG tree - unable to make tabPanel grow

Question

Could someone help me with the layout of those PrimeNG components?

I would like to have a tree taking the whole vertical space (minus buttonset at the bottom), scrolling if needed. Tree is being places inside a tab panel.

Thanks in advance

https://stackblitz.com/edit/angular-np8of7?file=src/app/app.component.html

Answer 1

Either you can add this kind of CSS

.p-tree {
  height: calc(100vh - 300px);
  overflow: auto;
}

but in order to apply it, you have to declare encapsulation: ViewEncapsulation.None in your component definition. See StackBlitz.

Either you just add in your CSS:

:host ::ng-deep .p-tree {
  height: calc(100vh - 300px);
  overflow: auto;
}