title: Empty select tag height inconsistent with the one which has a value
body: <p>I have two select elements as mentioned below</p>
  
  <pre><code>&lt;select size="20"&gt;
      &lt;option&gt;Hi&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;select size="20"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The size of these two select elements is set to 20. Applying the below css with font-family results in shrinking of empty select element.</p>
  
  <pre><code>select {
              width: 200px;
              height: auto;
              font-family : 'Courier New';
          }
  </code></pre>
  
  <p>I can't give a value to height, since the select element has to display 20 items.
  Is there a way to get over this issue and make it work in Firefox and Edge, other than adding a disabled/display none option to the second select element ?</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>select {
    width: 200px;
    height: auto;
    font-family: 'Courier New';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select size="20"&gt;
    &lt;option&gt;Hi&lt;/option&gt;
    &lt;option&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;select size="20"&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance</p>