Flexbox中的大型Primeng组件Butcher CSS

如何解决Flexbox中的大型Primeng组件Butcher CSS

我有一个简单的Angular应用程序，顶部有一个Navbar，底部有一个页脚，中间还有一些内容

  <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;
}

在内容部分，我将tabView包装到行/列设置中，如下所示：

<div class="row ">
  <div class="col-md-12">
     Lorem ipsum works even with very large texts
  </div>
</div>

样式完美地工作，因为当内容部分大于应用程序的默认大小时，页脚会向下移动，无论需要多少。

但是，如果我放置了大于标准屏幕尺寸/页脚标准位置的任何Primeng组件（此处为TabView），而不是放置纯HTML /纯文本，则样式将中断并且内容将被放置位于页脚顶部，而不是向下推页脚。

    <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>

有什么办法可以解决此问题？以编程方式最糟糕的情况。