使 p-panel 延伸到其父级的空间

Question

我正在使用 Angular (18.0.0) 和 PrimeNG (17.18)。 我正在水平对齐 p 面板，然后换行到下一行。 我希望每个 p 面板都使用其父面板的全部空间。 不幸的是，连续的 p 面板的大小与屏幕截图中看到的不同： 结果是这样的 我正在使用 Edge 浏览器。 知道如何使面板 2 和面板 3 具有与面板 1 相同的尺寸吗？ 这是我的组件：

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()
  ]
};

我尝试在上面编写代码。 我还尝试从浏览器覆盖 css 代码，但没有成功。

Answer 1

我们可以使用

display: block

和

height:100%

使其达到全高。在这里，我使用

::ng-deep

将更改传播到组件外部的 HTML。

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

完整代码：

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