CODEWITHSUNDEEP
angularangular-flex-layout
Tony1957
Tony1957

Reputation: 191

How to expand child component height to parent height

I have a card component that uses flex-layout. I want to extend the height to the size of the parent component height. Here is the card html

<div 
  gdAreas="header header | side content | footer footer"
  gdGap="16px"
  gdRows="auto auto auto"
  gdAreas.lt-md="header | side | content | footer"
    gdRows.lt-md="auto auto auto auto"
  >

    <div class="header" gdArea="header">
    <p>
            Buy and sell good stocks using conservative indicators.
    </p>
    </div>

      <div class="side" gdArea="side">
        <p>
                side    </p>
    </div>

    <div class="content" gdArea="content">
        <button mat-button color="basic">Try </button>
   </div>

    <div class="footer" gdArea="footer">
        Footer
    </div>
</div>

This is the parent component html:

<app-nav></app-nav>
<div 

  fxLayoutGap="32px" 
  fxLayoutAlign="flex-start">

  <!-- dummy loop -->
    <ng-container *ngFor="let _ of [1]">

     <app-card 
      fxFlex="100%"
      fxFlex.lt-md="100%"
      fxFlex.lt-sm="100%"
    ></app-card>

    </ng-container>
</div>
<router-outlet></router-outlet>

Currently the card component takes up one third of the app parent component.

Upvotes: 1

Views: 1985

Answers (1)

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

you can add fxFlexFill to fill the height of the parent

<ng-container *ngFor="let _ of [1]">
 <app-card 
  fxFlexFill  // here
  fxFlex.lt-md="100%"
  fxFlex.lt-sm="100%"
></app-card>

you could try 100vh instead of 100% too

Upvotes: 1

Related Questions