title: How to use -webkit-fill-available on Edge and IE11?
body: <p>I'm trying to use <code>-webkit-fill-available</code> cross browsers. I have the following code:</p>
  
  <pre><code>min-width: -webkit-fill-available;
  min-width: -moz-available;
  min-width: stretch;
  </code></pre>
  
  <p>It works well on Chrome, Firefox, but not on Edge and IE11. On Chrome and Firefox the element width fills its parent element, on Edge and IE11 the attribute is not recognised.</p>
  
  <p>How can I make IE11 have the same effect as <code>-webkit-fill-available</code>? </p>
  
  <p><strong>EDIT</strong>: here is an example, the <code>select</code> width does not fill its parent div on Edge and IE:</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>.container {
    max-width: 200px;
    background-color: grey;
  }
  
  .control {
    min-width: -webkit-fill-available;
    min-width: -moz-available;
    min-width: stretch;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    &lt;select class='control' name="cars" id="cars"&gt;
      &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
      &lt;option value="saab"&gt;Saab&lt;/option&gt;
      &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
      &lt;option value="audi"&gt;Audi&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>