Esta pergunta já tem uma resposta aqui:

O Chrome / Safari não preenche 100% da altura do pai flexível 4 respostas

Descobri que se definirmos um elemento de nível de bloco comheight:auto ouheight: 0~100% sem configurar a altura dos pais com valor explícito, e seu filho no nível do bloco tiver uma margem inferior, ele calculará a altura de maneira diferente no Chrome, mas não no Firefox. Para o caso que definiuheight: 1%:

http://codepen.io/anon/pen/BjgKMR

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div>
  <p class="inner">block level element</p>
</div>

A altura dediv bloco será calculado como omargin-bottom + content height of p element. Estou confuso sobreporque oheight: 1% deve ser calculado quanto aauto porque os elementos pai (html ebody tag) não define sua altura explicitamente, mas tem uma altura diferente, pois apenas definimos a altura diretamente comoauto?

Se o definirmos diretamenteheight: auto, claramente definirá a altura como a altura do elemento no nível de bloco filho, que não inclui a margem inferior.

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: auto;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div><p class="inner">block level element</p></div>

Eu li a especificação CSS 2.1 e penso que minha pergunta pode ser abordada no tópico de propriedades de altura e recolhimento de margem, mas ainda não consigo entender por que ele se comporta de maneira diferente na versão do Chrome. 47.0.2526, apesar do Firefox ver. 44.0.2 exibirá a altura com o mesmo valor.

Referências listadas:
https://www.w3.org/TR/CSS2/visudet.html#the-height-property

10.5: porcentagem

... Se a altura do bloco que contém não for especificada explicitamente (ou seja, depende da altura do conteúdo) e esse elemento não estiver absolutamente posicionado, o valor será computado como 'automático'. ...

10.6.3: Elementos não substituídos no nível do bloco em fluxo normal quandooverflow computa paravisible.

... se 'height' for 'auto', a altura depende se o elemento possui filhos em nível de bloco e se possui preenchimento ou bordas:

A altura do elemento é a distância da borda superior do conteúdo até a bordaprimeiro aplicável da seguinte:

a borda inferior da última caixa de linha, se a caixa estabelecer um contexto de formatação em linha com uma ou mais linhasa borda inferior da margem inferior (possivelmente recolhida) de seu último filho em fluxo, se a margem bo, ttom da criança não colapsar com a margem inferior do elementoa borda da borda inferior do último filho em fluxo cuja margem superior não entra em colapso com a margem inferior do elementozero, caso contrário

https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins

8.3.1 margens em colapso.

A margem superior de um elemento de bloco em fluxo entra em colapso com a primeira margem superior da criança em nível de bloco em fluxo, se o elemento não tiver borda superior, preenchimento de topo e a criança não tiver folga.

A margem inferior de uma caixa de bloco em fluxo com uma 'altura' de 'auto' e uma 'altura mínima' de zero entra em colapso com a margem inferior da última criança em nível de bloco em fluxo se a caixa não tiver preenchimento de fundo e não borda inferior e a margem inferior da criança não são recolhidas com uma margem superior com folga.

... Se as margens superior e inferior de uma caixa estiverem adjacentes, é possível que as margens colapsem através dela. Nesse caso, a posição do elemento depende de seu relacionamento com os outros elementos cujas margens estão sendo recolhidas.

Se as margens do elemento forem reduzidas com a margem superior do pai, a borda da borda superior da caixa será definida como a mesma do pai.Caso contrário, o pai do elemento não está participando do recolhimento da margem ou apenas a margem inferior do pai está envolvida. A posição da borda superior da borda do elemento é a mesma que seria se o elemento tivesse uma borda inferior diferente de zero.