title: How to make this angular flex layout full height based on screen size?
body: <p>I want to create one grid of full height along with a pagination element always at the bottom of the screen. I am using flex layout to achieve this.  I am able to produce this result on a fix height screen (My workstation).</p>
  
  <p><a href="https://i.stack.imgur.com/t5cYV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5cYV.png" alt="enter image description here"></a> </p>
  
  <p>But when I resize the browser or open the app on other small systems. the bottom pagination got overflowed and do not stick to there. Like the image I am attaching here. </p>
  
  <p><a href="https://i.stack.imgur.com/ZluN0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZluN0.png" alt="enter image description here"></a></p>
  
  <p>The code for the main page skeleton is like this</p>
  
  <pre><code>               &lt;!-- this is for fix--&gt;
            &lt;div fxFlex="12" class="sec3"&gt;
                    &lt;app-layout-header&gt;&lt;/app-layout-header&gt;
                  &lt;/div&gt;
  
          &lt;!-- this is for main view  --&gt;
  
           &lt;div fxFlex="88" fxLayout="column" fxFlexFill class="sec2"&gt;
                   &lt;app-layout-view&gt;&lt;/app-layout-view&gt;
                   &lt;router-outlet&gt;&lt;/router-outlet&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>The class sec2 is having the below css as a result in insepecter .</p>
  
  <pre><code>    height: 100%;
      margin: 0px;
      width: 100%;
      flex: 1 1 100%;
      box-sizing: border-box;
      flex-direction: column;
      display: flex;
      max-height: 88%;
  </code></pre>
  
  <p>Now inside the   Directive I have this code.</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
   &lt;mat-table #table&gt;
    &lt;/mat-table&gt;
  
  
      &lt;mat-paginator #paginator&gt;
    &lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have used the below Css for .example-container class</p>
  
  <pre><code>.example-container {
    display: flex;
    flex-direction: column;
    min-height: -webkit-fill-available;
    min-width: 300px;
    max-height: -webkit-fill-available;
  }
  </code></pre>
  
  <p>Also because of the bug in the above layout I get the select field in pagination got overflowed instead of showing a normal behavior as I asked here in this question. <a href="https://stackoverflow.com/questions/49977202/why-angular-material-select-is-overflowing-the-screen?noredirect=1#comment86970643_49977202">Why angular material select is overflowing the screen</a> </p>
  
  <p>Please help me with setting the correct layout because due to this I am not able to test my app in diff view ports.</p>