Content is not responsive in flex layout angular

Question

Content of home.component.html act unresponsively but when I put the code of home.component.html directly in app.component.html then it act responsively and work perfectly. However, in home.component.html it only show some part of UI and do not scale. If you somebody know what is the issue then please let me know

Code of home.component.html file is :

<div fxFlexFill class="example-container">
  <div fxLayout="column" fxLayoutGap="32px" [style.height]="'100%'">
    <mat-card class="card-margins">
      <mat-card-title></mat-card-title>
       <div
         fxLayout="row"
         fxLayoutGap="32px"
         fxLayout.lt-sm="column"      
         fxLayoutGap.lt-sm="10px">
       <div fxFlex="0 0 50%">
          <img mat-card-image src="../assets/image.png" alt="Free image">
       </div>
      </div>
      <div fxFlex="0 0 calc(50%-36px)">
         <mat-card-content>
           Bacon ipsum dolor amet corned beef biltong short loin frankfurter. Shoulder bresaola
        tongue chuck, boudin buffalo meatloaf andouille chicken picanha alcatra cow fatback t-bone prosciutto. Biltong
        meatloaf shank, beef boudin brisket prosciutto andouille burgdoggen turducken. Jerky alcatra porchetta swine
        prosciutto, andouille shank pig beef ribs burgdoggen capicola. Pork swine frankfurter, rump ham hock beef ribs
        ham
        ball tip jerky turkey ground round prosciutto.

        <p>Shankle spare ribs brisket jerky, beef ribs bacon kielbasa. Cow ground round pig landjaeger, chicken chuck
          capicola strip steak turkey swine porchetta. Swine burgdoggen meatball capicola ham, pork belly pancetta
          kielbasa
          fatback pastrami. Ham tongue flank, drumstick pastrami pork loin ground round. Doner tongue tenderloin, corned
          beef cupim pork frankfurter short loin chuck salami meatball.</p>
      </mat-card-content>
      </div>
  </mat-card>

  <div
    fxLayout="row wrap"
    fxLayout.lt-sm="column"
    fxLayoutAlign="space-between stretch"
    class="card-margins">

    <ng-container *ngFor="let _ of [1,2,3,4,5,6]">
      <div   
        fxFlex="32"
        fxFlex.lt-md="49"
        fxFlex.lt-sm="99"
        style=""
        fxFill>
      <mat-card style="margin-bottom: 10px">
        <mat-card-title>Card nr. {{_}}</mat-card-title>
        <img mat-card-image src="https://images.huffingtonpost.com/2015-03-22-1427023616-8757697-BlackBeanSaladwithChipotleVinaigrette.jpg" alt="Placeholder">
        <mat-card-content>
          <p>Bacon ipsum dolor amet corned beef biltong short loin frankfurter. Shoulder bresaola
            tongue chuck, boudin buffalo meatloaf andouille chicken picanha alcatra cow fatback t-bone prosciutto.
            Biltong meatloaf shank, beef boudin brisket prosciutto andouille burgdoggen turducken. Jerky alcatra
            porchetta swine prosciutto, andouille shank pig beef ribs burgdoggen capicola. Pork swine frankfurter,
            rump ham hock beef ribs ham ball tip jerky turkey ground round prosciutto.</p>

          <p *ngIf="_>1">Shankle spare ribs brisket jerky, beef ribs bacon kielbasa. Cow ground round pig landjaeger, chicken chuck
            capicola strip steak turkey swine porchetta. Swine burgdoggen meatball capicola ham, pork belly pancetta
            kielbasa
            fatback pastrami. Ham tongue flank, drumstick pastrami pork loin ground round. Doner tongue tenderloin,
            corned
            beef cupim pork frankfurter short loin chuck salami meatball.</p>
        </mat-card-content>
        <mat-card-footer>
          <button mat-button>
            <mat-icon>thumb_up_alt</mat-icon>
            Like
          </button>
          <button mat-button>
            <mat-icon>share</mat-icon>
            Share
          </button>
          <button mat-button>
            <mat-icon>forward</mat-icon>
            More info
          </button>
        </mat-card-footer>
      </mat-card>
      </div>
    </ng-container>
  </div>
</div>
</div>

Code of app.component.html file is :

<mat-sidenav-container>

  <mat-toolbar class="toolbar">
  <mat-toolbar-row>
      <div class="toolbar__logo-title-group"
      >
  
      <a routerLink="/"
      fxLayout>
     <img class="toolbar__logo"
          src="../assets/logo.png"
          alt="NgAuction Logo">
   </a>   
 </div>
 <div fxFlex></div>

    <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <div fxShow="true" fxHide.lt-md="true"> 
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>HOME</a>
      <a href="#" mat-button>About us</a>
      <a href="#" mat-button>Contact us</a>
      <a href="#" mat-button> Support</a>
    </div>
  </mat-toolbar-row>

</mat-toolbar>
  <mat-sidenav #sidenav position="end">
  <mat-nav-list>
      <a href="#" mat-list-item>
          HOME
      </a>
      <a href="#" mat-list-item>About us</a>
      <a href="#" mat-list-item>Contact us</a>
      <a href="#" mat-list-item>Support</a>
     
    </mat-nav-list>  </mat-sidenav>
    <router-outlet></router-outlet>

</mat-sidenav-container>

H S Progr H S Progr · Accepted Answer · 2020-07-10T12:41:14

First check all the required modules are added in module file then remove the parent div:

 <div fxFlexFill class="example-container">

from the home.component.html then it will work perfectly in a responsive way

Content is not responsive in flex layout angular

1 Answers