Bad responsive for p-table with flex layou

[petrkasnal@seznam.cz]

Hi,

i create my own layout with primeflex. When i add table to layout. The table isnt responsive (not show scroll bar). Can you help me please?

Code: Select all

<div class="grid h-full flex-column">
  <div class="flex flex-column h-full">
    <div class="flex flex-column">
      <app-navbar class="navbar-container"></app-navbar>
    </div>
    <div class="flex flex-row h-full">
      <div class="hidden md:flex sidepanel-container">
        <app-sidepanel></app-sidepanel>
      </div>
      <div class="flex-auto grid-nogutter py-4 content-container">
        <router-outlet></router-outlet>
      </div>
    </div>
    <div class="flex flex-column z-3">
      <app-footer class="footer-container"></app-footer>
    </div>
  </div>
</div>

Table comp:

Code: Select all

    <p-table styleClass="col-12" [value]="customers" [tableStyle]="{'min-width': '50rem'}" [responsive]="true">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th>Name </th>
                <th>Price</th>
                <th>Category</th>
                <th>Quantity</th>
                <th>Quantity2</th>
                <th>Quantity3</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product let-columns="columns">
            <tr>
                <td>{{product.name}}</td>
                <td>{{product.country}}</td>
                <td>{{product.agent}}</td>
                <td>{{product.date}}</td>
                <td>{{product.balance}}</td>
                <td>{{product.status}}</td>
            </tr>
        </ng-template>
    </p-table>

The scroll bar is shows on whole content



Thank you