Make p-panel stretches to its parent's spac

Question

I am using Angular (18.0.0) with PrimeNG (17.18). I am aligning p-panel horizontally and then wrap to the next line. I would like that each p-panel uses the full space of its parent. Unfortunately, the p-panels in a row do not have the same size as you can see in the screenshot: Here is the outcome I am using Edge browser. Any idea how to make Panel 2 and Panel 3 have the same size as Panel 1 ? Here is my component:

1. app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PanelModule } from 'primeng/panel';



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, PanelModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'primeng-pb-p-panel';
}

2. app.component.html

<div class="flex-container">
    <div class="flex-item">
        <p-panel header="Panel 1" class="full-size-panel">
            Item 1: Lorem ipsum dolor sit amet Consectetur adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit
            Lorem ipsum dolor sit amet Consectetur adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit
        </p-panel> 
    </div>
    <div class="flex-item">
        <p-panel header="Panel 2" class="full-size-panel">
                Item 2: Consectetur adipiscing elit
        </p-panel>        
    </div>
    <div class="flex-item">
        <p-panel header="Panel 3" class="full-size-panel">
                Item 3: This is panel 3
        </p-panel>
    </div>    
  </div>

3. app.component.css

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px; /* Adjust gap between items */
  width: 100%;
  height: 100%;
}

.flex-item {
  flex: 1 0 calc(33.33% - 20px); /* Adjust item width and gap */
  background-color: #f0f0f0;
  padding: 10px;
  box-sizing: border-box;
}

.full-size-panel {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Make sure content inside the panel also uses flex */
  }

4. app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';




export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptorsFromDi()),
    provideAnimations()
  ]
};

I tried to code above. I also tried to override the css code from the browser without any success.

Answer 1

We can use display: block and height:100% to make it full height. Here I use ::ng-deep to propogate the changes to HTML outside the component.

    ::ng-deep .full-size-panel, ::ng-deep .p-panel {
        display: block !important;
        height:100% !important; 
    }

    ::ng-deep .p-toggleable-content {
        height: calc(100% - 53px);
    }

    ::ng-deep .p-panel-content {
        height:100% !important; 
    }

Full Code:

TS:

import { Component } from '@angular/core';
import { ImportsModule } from './imports';
@Component({
  selector: 'panel-basic-demo',
  templateUrl: './panel-basic-demo.html',
  standalone: true,
  imports: [ImportsModule],
  styles: [
    `
        .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px; /* Adjust gap between items */
        width: 100%;
        height: 100%;
        }

        .flex-item {
        flex: 1 0 calc(33.33% - 20px); /* Adjust item width and gap */ 
        background-color: #f0f0f0;
        padding: 10px;
        box-sizing: border-box;
        }

        .full-size-panel {
            flex: 1 1 auto;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column; /* Make sure content inside the panel also uses flex */
        }

        ::ng-deep .full-size-panel, ::ng-deep .p-panel {
            display: block !important;
            height:100% !important; 
        }

        ::ng-deep .p-toggleable-content {
            height: calc(100% - 53px);
        }

        ::ng-deep .p-panel-content {
            height:100% !important; 
        }
        `,
  ],
})
export class PanelBasicDemo {
  title = 'primeng-pb-p-panel';
}

HTML:

<div class="flex-container">
  <div class="flex-item">
    <p-panel header="Panel 1" class="full-size-panel">
      Item 1: Lorem ipsum dolor sit amet Consectetur adipiscing elit Consectetur
      adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit
      Lorem ipsum dolor sit amet Consectetur adipiscing elit Consectetur
      adipiscing elit Consectetur adipiscing elit Consectetur adipiscing elit
    </p-panel>
  </div>
  <div class="flex-item">
    <p-panel header="Panel 2" class="full-size-panel">
      Item 2: Consectetur adipiscing elit
    </p-panel>
  </div>
  <div class="flex-item">
    <p-panel header="Panel 3" class="full-size-panel">
      Item 3: This is panel 3
    </p-panel>
  </div>
</div>

Stackblitz Demo