title: How to use height: -webkit-fill-available in Edge browser? How to make a div fill the available space in Edge?
body: <p>I am using bootstrap to preview the mobile device as follows:<br/>
  <a href="https://i.stack.imgur.com/EeTEp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EeTEp.png" alt="enter image description here"></a></p>
  
  <p>It works perfectly fine in Chrome. But not on edge :(</p>
  
  <p>My HTML/CSS code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.frame {
    border-radius: 15px;
    background-color: #b3b6b9;
    height: 400px;
    padding: 50px 10px 75px 10px;
  }
  
  .screen {
    border-radius: 10px;
    background-color: #ffffff;
    height: -webkit-fill-available;
    padding: 20px 15px 150px 15px;
    
  }
  .circle {
    border: 1px solid;
    border-color: #ffffff;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    margin: 10px auto;
    position: relative;
  }
  .preview {
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 0px;
  
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 0px;
  
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 0px;
    background-color: #dee0e2;
    height: -webkit-fill-available;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-4"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
            &lt;p&gt;Preview&lt;/p&gt;
            &lt;div class="frame"&gt;
              &lt;div class="screen"&gt;
                &lt;div class="preview"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="circle"&gt;
                &amp;nbsp;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the layout is not working fine in Edge. I guess there is something to do with the CSS statement height: -webkit-fill-available;</p>
  
  <p>The layout of the mobile device in Edge is shown below for your reference.
  <a href="https://i.stack.imgur.com/mbBl0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mbBl0.png" alt="enter image description here"></a></p>
  
  <p>Notice that the preview div also not displayed in Edge:</p>