Wie werden Akkordeonplatten am Bildschirm angebracht? ⇐ CSS

[Anonymous]

Ich verwende die PrimeNG Accordion-Komponente, bei der das erste Panel ein Formular enthält und das zweite und dritte Panel Tabellen enthalten. Ein Beispiel finden Sie hier:
https://stackblitz.com/edit/wawhkkem-rwy91iox

Code: Select all

Header I


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan
bibendum volutpat. Nunc tristique at arcu ac vehicula. Nulla sed
semper nisi, at imperdiet leo. Maecenas ac interdum magna, et
porttitor erat.  Morbi aliquet, elit quis placerat bibendum, diam mi
imperdiet massa, et tincidunt massa sapien a urna.




Header II




Code
Name
Category
Quantity




{{ product.code }}
{{ product.name }}
{{ product.category }}
{{ product.quantity }}







Header III




Code
Name
Category
Quantity




{{ product.code }}
{{ product.name }}
{{ product.category }}
{{ product.quantity }}

Code: Select all

import { Component } from '@angular/core';
import { AccordionModule } from 'primeng/accordion';
import { TableModule } from 'primeng/table';
@Component({
selector: 'accordion-basic-demo',
templateUrl: './accordion-basic-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class AccordionBasicDemo {
products = [
{
code: 'abcd',
name: 'First',
category: 'A',
quantity: 1,
},
{
code: 'bcde',
name: 'Second',
category: 'B',
quantity: 1,
},
{
code: 'cdef',
name: 'Third',
category: 'C',
quantity: 1,
},
{
code: 'defg',
name: 'Fourth',
category: 'D',
quantity: 1,
},
{
code: 'efgh',
name: 'Fifth',
category: 'E',
quantity: 1,
},
{
code: 'fghi',
name: 'Sixth',
category: 'F',
quantity: 1,
},
{
code: 'ghij',
name: 'Seventh',
category: 'G',
quantity: 1,
},
{
code: 'hijk',
name: 'Eighth',
category: 'H',
quantity: 1,
},
{
code: 'ijkm',
name: 'Ninth',
category: 'I',
quantity: 1,
},
];
}

Das Ziel wäre, dass die Panels mit den Tabellen der Größe des Bildschirms entsprechen, sich erweitern, um den Raum auszufüllen, und verkleinern, damit der Bildschirm nicht überfüllt wird, und bei Bedarf eine Bildlaufleiste anzeigen. Ich habe verschiedene Styling-Strategien ausprobiert, einschließlich der Änderung der Überlauf-, Flex- und Höheneigenschaften, aber keine davon hat das von mir gesuchte Verhalten ermöglicht. Gibt es eine Möglichkeit, das Akkordeon und die Tische so zu gestalten, dass dies erreicht wird?