How to Standardize the Height of a Select Box Between Chrome and Firefox

Heights rendering differently in Chrome and Firefox

So first you have the W3C standards, which are a set of guidelines for browser makers.

And then you have the browser makers, who are free to do whatever they want (as evidenced by a history of deviations by Internet Explorer).

In particular, with CSS percentage heights, there are clear differences in behavior among browsers.

You've posted one example. Here's another:

Percentage Heights in Flexbox: Chrome/Safari vs Firefox/IE

When working with flexbox, Chrome and Safari resolve percentage heights on flex items based on the value of the parent's height property. Firefox and IE11/Edge prioritize the parent's flex height.

It appears Webkit browsers adhere to a more traditional interpretation of the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

In other words, for percentage height to work on an in-flow child, the parent must have a set height.

That is the traditional interpretation of the spec: The term "height" means the value of the height property. My own view is that this language is vague and open to interpretation, but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage values.

Recently, however, Firefox and IE have broadened their interpretation to accept flex heights, as well.

Examples of Firefox and IE using a parent's flex height as reference for a child's percentage height:

Chrome ignoring flex-basis in column layout
Chrome / Safari not filling 100% height of flex parent
Height is not correct in flexbox items in Chrome
Flexbox in Chrome--How to limit size of nested elements?

Knowing which browsers are in compliance with the spec is a bit difficult because, as I mentioned before, the spec language seems vague and open to interpretation.

With the last update to this part of the definition being in 1998 (CSS2), and the advent of new forms of height such as flex height, an update seems long overdue.

I think it's fair to say that when it comes to percentage heights, until the spec definition gets an update, you can expect rendering differences among browsers.

Alternative Solutions

Here are two alternatives to consider when wanting a child element to take the parent's full height.

Apply display: flex to the parent. This automatically sets align-items: stretch, which tells the child to expand the full available height of the parent.
Apply position: relative on the parent and position: absolute; height: 100%; width: 100% on the child. With absolute positioning, a percentage height will work without a specified height on the parent.

Setting the height of a SELECT in IE

There is no work-around for this aside from ditching the select element.

How do I apply padding within a select dropdown box?

Try adding -webkit-appearance: none at least to the <select> but possibly to both. OSX really wants their controls to look apple-y

Sizing option independently from select

This is an interesting problem and one that I've come across myself but as far as I know there is now way to achieve this. Read this CSS Tricks article for a more complete treatment.

Several browsers lock down certain components and don't expose options to modify their styling without some serious wizardry. Another similar but different example is a checkbox, while you can customize checkboxes doing so is non-trivial.

I'd suggest either revisiting your design as the author of CSS Tricks suggests or you could go with a already made solution such as Select2 Plugin, or Selectize, or you could make one from scratch using these as a reference.

Why do Chrome, Firefox and IE all render fixed-width SELECT controls differently?

Form controls will always be less obedient to styling attempts,in particular selects and file inputs, so the only way to reliably style them cross-browser and with future-proofing in mind, is to replace them with JavaScript or Flash and mimic their functionality