Как разместить панели-аккордеоны на экране? ⇐ CSS

[Anonymous]

Я использую компонент PrimeNG Accordion, где первая панель содержит форму, а вторая и третья панели содержат таблицы. См. пример здесь:
https://stackblitz.com/edit/wawhkkem-rwy91iox

Код: Выделить всё

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

Код: Выделить всё

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

Цель состоит в том, чтобы панели с таблицами соответствовали размеру экрана, расширялись, чтобы заполнить пространство, и сжимались, чтобы не переполнять экран, отображая полосу прокрутки там, где это необходимо. Я пробовал различные стратегии стилизации, включая изменение свойств переполнения, гибкости и высоты, но ни одна из них не позволила добиться того поведения, которое я ищу. Есть ли способ стилизовать аккордеон и таблицы, чтобы добиться этого?


Подробнее здесь: https://stackoverflow.com/questions/798 ... the-screen