Como fazer com que <div> preencha <td> a altura no Firefox

Por aqui, essa pergunta foi respondida no IE e no Chrome, mas a solução proposta parece não funcionar no Firefox 16, 45 e provavelmente em todas as versões intermediárias.

Basicamente, a solução proposta é a seguinte:

table,th,td {
  border: 1px solid black;
}
<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100%;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

Ao definir oheight dotd para1pxa criançadiv pode definirheight:100%. No Chrome e IE, o100% é então interpretado como "a altura da célula", enquanto no Firefox parece se tornar a altura máxima necessária para odivs conteúdo.

A execução do exemplo acima no Firefox ilustrará isso intuitivamente ...

Então, estou procurando uma solução que também funcione no Firefox.

questionAnswers(2)

yourAnswerToTheQuestion