title: how to avoid horizontal and vertical scrolls in angular using angular material flexlayout
body: <p>I am working with angular 2 using angular material and flex layout. I have implemented <strong>mat-sidenav</strong> and have taken some <strong>mat-form-field</strong> and also implemented <strong>mat-table</strong></p>
  
  <p>I have only specified max-height to the <strong>mat-table</strong> component but I am getting both horizontal and vertical scroll bars for the page apart from the vertical scroll bar of <strong>mat-table</strong> </p>
  
  <h2>Below shown is my page.</h2>
  
  <p><a href="https://i.stack.imgur.com/VpDId.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VpDId.png" alt="enter image description here"></a></p>
  
  <h2>And when make it to xs viewport, i am getting multiple scrolls as shown below</h2>
  
  <p><a href="https://i.stack.imgur.com/FJobz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FJobz.png" alt="enter image description here"></a></p>
  
  <p>Can anybody please help me in resolving how to avoid these scroll bars ...?</p>
  
  <p>Please access my sample code <a href="https://stackblitz.com/edit/angular-6ejrbj-pntnzz?file=app%2Ftable-selection-example.html" rel="nofollow noreferrer">here</a> </p>
  
  <h2>.html file</h2>
  
  <pre><code>&lt;mat-sidenav-container&gt;
      &lt;mat-sidenav #sidenav&gt;
          &lt;div class="sidenav-header"&gt;
              &lt;mat-nav-list&gt;
  
                  &lt;h3 mat-subheader&gt;Status At A Glance&lt;/h3&gt;
                  &lt;a mat-list-item routerLink='' routerLinkActive="active"&gt;Not Started&lt;/a&gt;
                  &lt;a mat-list-item routerLink='' routerLinkActive="active"&gt;Incomplete&lt;/a&gt;
                  &lt;a mat-list-item routerLink='' routerLinkActive="active"&gt;Complete&lt;/a&gt;
                  &lt;mat-divider&gt;&lt;/mat-divider&gt;
                  &lt;a mat-list-item routerLink='' routerLinkActive="active"&gt;Total&lt;/a&gt;
                  &lt;mat-divider&gt;&lt;/mat-divider&gt;
  
                  &lt;mat-form-field floatPlaceholder="never" style="width:150px; height:15px; margin-left:10px; font-size:12px; font-family: Verdana,Sans-Serif;"&gt;
                      &lt;mat-select placeholder=" Select Department" [(value)]="selecteddept" style="width:150px;"&gt;
                          &lt;input class="input1" matInput type="text"&gt;
                          &lt;mat-option *ngFor="let Department of departments " [value]="Department.value" style="font-size:12px; font-family: Verdana,Sans-Serif; margin:-5px 0 -5px 0;"&gt;
                              {{Department.viewValue }}
                          &lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-divider&gt;&lt;/mat-divider&gt;
                  &lt;h3 mat-subheader&gt;Space Administration &lt;/h3&gt;
                  &lt;a mat-list-item routerLink='/Home/SurveyTools/RemoveRoomFromList' routerLinkActive="active"&gt;Remove Room From List&lt;/a&gt;
                  &lt;a mat-list-item routerLink='/Home/SurveyTools/RequestRoom' routerLinkActive="active"&gt;Request A Room &lt;/a&gt;
                  &lt;a mat-list-item routerLink='/Home/SurveyTools/SplitRoomMultiplePi' routerLinkActive="active"&gt;Split Room - Multiple PI's&lt;/a&gt;
                  &lt;a mat-list-item routerLink='/SpaceAdmin/BlockCode/BlockCode' routerLinkActive="active"&gt;Block Code&lt;/a&gt;
                  &lt;a mat-list-item&gt;Lab Support Rooms&lt;/a&gt;
                  &lt;mat-divider&gt;&lt;/mat-divider&gt;
  
                  &lt;h3 mat-subheader&gt;Survey Tools&lt;/h3&gt;
                  &lt;a mat-list-item&gt;Create New Lab Cluster&lt;/a&gt;
                  &lt;a mat-list-item&gt;Blank Survey Form &lt;/a&gt;
                  &lt;a mat-list-item&gt;Common Task&lt;/a&gt;
                  &lt;a mat-list-item&gt;Survey Instruction&lt;/a&gt;
                  &lt;a mat-list-item&gt;User Guide&lt;/a&gt;
                  &lt;mat-divider&gt;&lt;/mat-divider&gt;
  
              &lt;/mat-nav-list&gt;
  
          &lt;/div&gt;
      &lt;/mat-sidenav&gt;
  
      &lt;div [ngStyle]="{'display' : (screenWidth &gt; 840) ? 'none' : 'block'}"&gt;
          &lt;div fxLayout="row" fxLayoutAlign=" start stretch"&gt;
              &lt;a (click)="sidenav.open()"&gt;
                  &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
              &lt;/a&gt;&amp;emsp;
              &lt;h1&gt; SPACE SURVEY &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;p style="margin:-5px; text-align:center;"&gt; &amp;emsp; If you need help, Please &lt;strong&gt;&lt;a href="#visit our detailed instruction"&gt;visit our detailed instruction &lt;/a&gt;&lt;/strong&gt;          on how to use this site.&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div&gt;
  
  
  
          &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center"&gt;
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder=" Department"&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let Department of department   " [value]="Department.value"&gt;
                          {{Department.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;&lt;br/&gt;
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder="Building "&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let Building of buildings  " [value]="Building.value"&gt;
                          {{ Building.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;&lt;br/&gt;
  
          &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center"&gt;
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder=" Sub Department"&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let subdepartment of subdepartments " [value]="subdepartment.value"&gt;
                          {{ subdepartment.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;&lt;br/&gt;
  
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder=" Floor"&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let floor of floors" [value]="floor.value"&gt;
                          {{ floor.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;&lt;br/&gt;
  
          &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center"&gt;
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder=" Status"&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let status of statuses" [value]="status.value"&gt;
  
                          {{ status.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt; &lt;br/&gt;
  
              &lt;mat-form-field floatPlaceholder="never"&gt;
                  &lt;mat-select placeholder=" Room Type  "&gt;
                      &lt;input class="input1" matInput type="text"&gt;
                      &lt;mat-option *ngFor="let roomtype of roomtypes" [value]="roomtype.value"&gt;
  
                          {{ roomtype.viewValue }}
                      &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;&lt;br/&gt;
  
          &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center"&gt;
  
              &lt;mat-input-container floatPlaceholder="never"&gt;
                  &lt;input matInput placeholder=" Responsible Person  "&gt;
              &lt;/mat-input-container&gt; &lt;br/&gt;
  
              &lt;mat-input-container floatPlaceholder="never"&gt;
                  &lt;input matInput placeholder=" Room Number  "&gt;
              &lt;/mat-input-container&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;div fxLayout="row" fxLayoutAlign="center center"&gt;
          &lt;button mat-raised-button color="primary"&gt;View All&lt;/button&gt;&lt;br/&gt;
      &lt;/div&gt; &lt;br/&gt;
  
      &lt;div class="material-table mat-elevation-z8"&gt;
          &lt;mat-table #table [dataSource]="dataSource"&gt;
  
  
              &lt;!-- Checkbox Column --&gt;
              &lt;ng-container matColumnDef="select"&gt;
                  &lt;mat-header-cell style="max-width:50px;" *matHeaderCellDef&gt;
                      &lt;mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() &amp;&amp; isAllSelected()" [indeterminate]="selection.hasValue() &amp;&amp; !isAllSelected()"&gt;
                      &lt;/mat-checkbox&gt;
                  &lt;/mat-header-cell&gt;
                  &lt;mat-cell style="max-width:50px;" *matCellDef="let row"&gt;
                      &lt;mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"&gt;
                      &lt;/mat-checkbox&gt;
                  &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="num"&gt;
                  &lt;mat-header-cell style="max-width:0px;" *matHeaderCellDef&gt; &lt;/mat-header-cell&gt;
                  &lt;mat-cell style="max-width:0px;" *matCellDef="let element"&gt;&lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="statuses"&gt;
                  &lt;mat-header-cell *matHeaderCellDef&gt; Completion Status &lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let element"&gt; {{element.statuses}}&lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
  
              &lt;ng-container matColumnDef="building"&gt;
                  &lt;mat-header-cell style="text-align:left; padding-left:70px;" *matHeaderCellDef&gt; Building &lt;/mat-header-cell&gt;
                  &lt;mat-cell style="text-align:left; padding-left:70px;" *matCellDef="let element"&gt; {{element.building}} &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
              &lt;ng-container matColumnDef="floor"&gt;
                  &lt;mat-header-cell *matHeaderCellDef&gt; Floor &lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let element"&gt; {{element.floor}} &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
  
              &lt;ng-container matColumnDef="roomtype"&gt;
                  &lt;mat-header-cell *matHeaderCellDef&gt; Room No. &lt;/mat-header-cell&gt;
                  &lt;mat-cell *matCellDef="let element"&gt; {{element.roomtype}} &lt;/mat-cell&gt;
              &lt;/ng-container&gt;
  
  
  
              &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
              &lt;mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"&gt;
              &lt;/mat-row&gt;
  
          &lt;/mat-table&gt;
          &lt;div style=height:30px;&gt;
              &lt;mat-paginator #paginator [pageSize]="9" [pageSizeOptions]="[5, 10, 25, 100]"&gt;
              &lt;/mat-paginator&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <h2>.css file</h2>
  
  <pre><code>h1,h2 {
     font-family: Verdana, sans-serif;
      color:#1a084c;
      font-weight:bold;
      font-size:14px;
  }
  
  
  .mat-raised-button{
    border-radius: 15px; 
    font-size:12px;
    font-family: Verdana,Sans-Serif;
    text-align:center;
    font-weight:bold;
    height:30px;
  }
  
  
  mat-form-field, mat-input-container{
      font-family: Verdana, sans-serif;
      color:#1a084c;
      font-size:11px;
      height:10px;
      width:300px;
      }
  
   mat-select{
      font-family: Verdana, sans-serif;
      color:#1a084c;
      font-size:11px;
      width:300px;
      }
  
  
  
  //styles for material -table
  
  mat-header-cell, mat-header-row, .mat-header-cell-def{
      background:#f2f4f7;
      min-height:15px;
      font-family:Verdana,sans-serif;
      font-weight:bold;
      font-size:13px;
      color: #1a084c;
      margin-bottom:5px;
       top: 0;
      position: sticky;
      z-index: 1;
  }
  
  mat-row{
      min-height:20px;
      font-family:Verdana,sans-serif;
      font-size:11px;
      color: #1a084c;
      }
  mat-cell{
      height:20px;
      font-family:Verdana,sans-serif;
      font-size:11px; 
      color: #1a084c;
  }
  
  .example-container {
    display: flex;
    flex-direction: column;
    max-height: 180px;
    margin:auto;
  }
  
  .mat-table {
      font-size:11px;
      font-family: Verdana,Sans-Serif;
      color: #1a084c;
      overflow: auto;
      max-height: 180px;
  }
  
  mat-header-cell, mat-header-row, .mat-header-cell-def{
      background:#f2f4f7;
      min-height:15px;
      font-family:Verdana,sans-serif;
      font-weight:bold;
      font-size:13px;
      color: #1a084c;
      margin-bottom:5px;
       top: 0;
      position: sticky;
      z-index: 1;
  }
  
  mat-row{
      min-height:20px;
      font-family:Verdana,sans-serif;
      font-size:11px;
      color: #1a084c;
      }
  mat-cell{
      height:20px;
      font-family:Verdana,sans-serif;
      font-size:11px; 
      color: #1a084c;
  }
  
  
    @media only screen and (max-width: 736px) and (orientation:portrait) {
      mat-header-row, mat-row {
       width: 200%; 
      }
  
    }
  //style for the paginator
  
  mat-paginator{
  }
  .mat-paginator-container{
      float:right;
  }
  
  .mat-subheader{
      font-family: Verdana, sans-serif;
      font-size: 13px;
      font-weight:bold;
      background-color: #f2f4f7;
      height:8px;   
      margin-top:5px;
      }
  
  .mat-list-item{
      font-family: Verdana, sans-serif;
      font-size: 12px;
      height: 20px;
  }
  
  .mat-list-item:visited {
      color: #0c0c28;
      background-color: transparent;
      text-decoration: none;
  }
  
  .mat-list-item:hover {
      color: #0c0c28;
      background-color: transparent;
      text-decoration: underline;
      font-weight: bold;
  }
  
  .mat-list-item:active {
      color: #0c0c28;
      background-color: transparent;
      text-decoration: underline;
  }
  </code></pre>
  
  <h2>.ts file</h2>
  
  <pre><code>import { SelectionModel } from '@angular/cdk/collections';
  import { Component, OnInit, ViewChild, Inject  } from '@angular/core';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatTableDataSource } from '@angular/material/table';
  /**
   * @title Table with selection
   */
  @Component({
    selector: 'table-selection-example',
    styleUrls: ['table-selection-example.css'],
    templateUrl: 'table-selection-example.html',
    encapsulation: ViewEncapsulation.None
  })
  export class TableSelectionExample {
     selecteddept: string;
  
  departments = [
      {value: 'Department 1', viewValue: 'Department 1'},
      {value: 'Department 2', viewValue: 'Department 2'},
      {value: 'Department 3', viewValue: 'Department 3'}
    ];
  
  
      department = [
      {value: ' ASB ', viewValue: ' ASB '},
      {value: 'BIOCHEMISTRY 2', viewValue: 'BIOCHEMISTRY 2'},
      {value: 'BUDGET AND COST 3', viewValue: 'BUDGET AND COST 3'},
        {value: ' CANCER CTR ', viewValue: ' CANCER CTR '},
      {value: 'CARDIOTHOR SURG 2', viewValue: 'CARDIOTHOR SURG 2'},
      {value: 'CELL BIOLOGY', viewValue: 'CELL BIOLOGY'},
        {value: ' DMB ', viewValue: ' DMB '},
      {value: 'DUPLICATING SVCS', viewValue: 'DUPLICATING SVCS'},
      {value: 'EMERGENCY MEDICINE', viewValue: 'EMERGENCY MEDICINE'}
    ];
  
  
  
  
      buildings = [
      {value: 'Alpha', viewValue: 'Alpha '},
      {value: 'Beta ', viewValue: 'Beta '},
      {value: 'Gamma ', viewValue: 'Gamma '},
       {value: 'delta ', viewValue: 'delta '},
        {value: 'ribon ', viewValue: 'ribon '}
    ];
  
  
      subdepartments = [
      {value: 'Sdept', viewValue: 'Sdept'},
      {value: 'bdept', viewValue: 'bdept'},
       {value: 'cdept', viewValue: 'cdept'},
      {value: 'zdept', viewValue: 'zdept'},
       {value: 'ldept', viewValue: 'ldept'},
      {value: 'mdept', viewValue: 'mdept'}
    ];
  
  
      floors = [
      {value: 'first', viewValue: 'first'},
      {value: 'second', viewValue: 'second'},
      {value: 'third', viewValue: 'third'}
    ];
  
     statuses = [
      {value: 'Status 1', viewValue: 'Status 1'},
      {value: 'Status 2', viewValue: 'Status 2'},
      {value: 'Status 3', viewValue: 'Status 3'}
    ];
  
       roomtypes = [
      {value: '  1', viewValue: '  1'},
      {value: '  2', viewValue: '  2'},
      {value: '  3', viewValue: '  3'}
    ];
  
  
    constructor(public showmenu:ShowmenuService, private _activateroute: ActivatedRoute) { }
  
    ngOnInit() {
      this.showmenu.show();
      this.showmenu.show1();
  
    } 
  
    displayedColumns = ['num', 'select','statuses', 'building', 'floor', 'roomtype'];
  dataSource = new MatTableDataSource&lt;Element&gt;(ELEMENT_DATA);
    selection = new SelectionModel&lt;Element&gt;(true, []);
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
     ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
    }
  
  
    /** Whether the number of selected elements matches the total number of rows. */
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      const numRows = this.dataSource.data.length;
      return numSelected === numRows;
    }
  
    /** Selects all rows if they are not all selected; otherwise clear selection. */
    masterToggle() {
      this.isAllSelected() ?
          this.selection.clear() :
          this.dataSource.data.forEach(row =&gt; this.selection.select(row));
    }
  
  
  
  }
  
   export interface Element {
    statuses: string;
    num: any;
    building: string;
    floor:string;
     roomtype:string;
  }
  
  const ELEMENT_DATA: Element[] = [
    {num:1,statuses: 'accepted', building: 'Abby', floor:'1',roomtype:'2'},
     {num:1,statuses: 'accepted', building: 'Hospital ', floor:'2',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'CBS', floor:'3',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'Flexner Hall', floor:'4',roomtype:'1'},
      {num:1,statuses: 'accepted', building: 'Abby', floor:'5',roomtype:'1'},
       {num:1,statuses: 'accepted', building: 'Hospital', floor:'5',roomtype:'1'}, 
       {num:1,statuses: 'accepted', building: 'CBS', floor:'6',roomtype:'1'},
       {num:1,statuses: 'accepted', building: 'Abby', floor:'1',roomtype:'2'},
     {num:1,statuses: 'accepted', building: 'Hospital ', floor:'2',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'CBS', floor:'3',roomtype:'1'}, 
     {num:1,statuses: 'accepted', building: 'Flexner Hall', floor:'4',roomtype:'1'},
      {num:1,statuses: 'accepted', building: 'Abby', floor:'5',roomtype:'1'},
       {num:1,statuses: 'accepted', building: 'Hospital', floor:'5',roomtype:'1'}, 
       {num:1,statuses: 'accepted', building: 'CBS', floor:'6',roomtype:'1'}
  ];
  </code></pre>