large primeng components butcher css in flexbox - html

Question

I have a simple Angular application, with a Navbar on top, a footer on the bottom and some content inbetween
<div id="app">
<app-navbar></app-navbar>
<div id="content">
<router-outlet></router-outlet>
</div>
<div id="footer">
<app-footer></app-footer>
</div>
</div>
html,
body {
height: 100%;
}
#app {
height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
in the content section, I have a tabView wrapped into a row/col setup, like this:
<div class="row ">
<div class="col-md-12">
Lorem ipsum works even with very large texts
</div>
</div>
The styling works perfectly, in that when the content section gets larger than the default size of the app, the footer moves down however much it needs.
However, if instead of putting plain HTML/ plain text I place any Primeng components (here: TabView) that are larger than the standard screen size/ standard position of the footer, the styling breaks and the content gets placed on top of the footer, instead of pushing the footer down.
<div class="col-md-12"> <-- ENLARGING THIS WORKS
<p-tabView orientation="top" [activeIndex]="tabIndex" (onChange)="handleChange($event)" class="order-form"
styleClass="tabview-compo-workbench height-test"> <-- ENLARGING THIS CAUSES THE ISSUE
<p-tabPanel class="tabview-panel-workbench" styleClass="tabview-compo-workbench">
<ng-template pTemplate="header">First Tab</ng-template>
<ng-template pTemplate="content">
some html content
</ng-template>
</p-tabPanel>
<p-tabPanel>
<ng-template pTemplate="header">Second Tab</ng-template>
<ng-template pTemplate="content">
some html content
</ng-template>
</p-tabPanel>
</p-tabView>
</div>
Is there any way to fix this issue? Worst case programmatically.