Nested flex stretch 100% on Diamond content-layout

[ipindado]

Hello...

I am working with Diamond template and I am not able to apply stretch to the items inside "flex" layout-content in order to fit height 100%.

Code: Select all

    <div class="layout-content-wrapper">
        <app-topbar></app-topbar>

        <div class="layout-content">
            <router-outlet></router-outlet>
        </div>

        <app-footer></app-footer>
    </div>

I tried to apply the approach defined in https://www.primefaces.org/diamond-ng/#/utilities/grid To a simple page rendered inside the layout content, but I am not able to stretch the content to fit height 100%.

Code: Select all

<div class="p-grid p-align-stretch vertical-container">
	<div class="p-col">
		<div class="box box-stretched">4</div>
	</div>
	<div class="p-col">
		<div class="box box-stretched">4</div>
	</div>
	<div class="p-col">
		<div class="box box-stretched">4</div>
	</div>
</div>

Does anybody faced an issue like this when trying to apply p-align-stretch to a nested flex?

Thanks and best regards.