Высота рендеринга по-разному в Chrome и Firefox [дубликат]

этот вопрос уже есть ответ здесь:

• Chrome / Safari не заполняет 100% высоту Flex parent 3 ответы

я нашел, если мы установили элемент уровня блока с height:auto или height: 0~100% без настройки высоты родителя с явным значением, а его дочерний уровень блока имеет нижнее поле, тогда он будет вычислять высота по-разному в Chrome, но не в Firefox. Для случая, который установлен height: 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>

высота div блок будет рассчитываться как margin-bottom + content height of p element. Я смущен почему height: 1% должно быть вычислено как к auto потому что родительские элементы(html и body tag) не устанавливает свою высоту явно, но имеет разную высоту, поскольку мы просто непосредственно установите высоту в auto?

если мы непосредственно установить его в height: auto, он будет явно просто установить высоту в качестве высоты дочернего элемента уровня блока, который не включает его нижний край.

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>

я прочитал спецификацию CSS 2.1 и думаю о том, что мой вопрос может быть покрыт темой height property и margin collapse, но все еще не могу понять, почему он ведет себя по-другому в Chrome ver. 47.0.2526, хотя Firefox ver. 44.0.2 отобразит высоту с тем же значением.

перечисленный references:
https://www.w3.org/TR/CSS2/visudet.html#the-height-property

• 10.5: процент

  ... Если высота содержащего блока не указана явно (т. е. зависит от высоты содержимого), и этот элемент не расположен абсолютно, значение вычисляется как "авто". ...

• 10.6.3: не-замененные элементы блок-уровня в нормальной подаче когда overflow равен visible.

  ... если "высота" является "авто", высота зависит от того, имеет ли элемент дочерние элементы уровня блока и имеет ли он заполнение или границы:

  высота элемента-это расстояние от его верхнего края содержимого до первая применимо следующее:

  1. в нижний край поля последней строки, если поле устанавливает встроенный контекст форматирования с одной или несколькими строками
  2. нижний край нижнего (возможно, свернутого) края последнего дочернего элемента в потоке, если нижнее поле дочернего элемента не свернуто с нижним полем элемента
  3. нижний край границы последнего дочернего элемента в потоке, верхнее поле которого не коллапсирует с нижним полем элемента
  4. ноль, в противном случае

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

• 8.3.1 сворачивание поля.

  верхний край элемента блока в потоке сворачивается с его первым в потоке блоком на уровне верхнего поля ребенка, если элемент не имеет верхней границы, без верхнего заполнения, и ребенок не имеет зазора.

  нижний край блок-бокса в потоке с "высота ""авто" и "мин-высота" нуля рушится с его последним в потоке блок-уровня нижнего поля ребенка, если коробка не имеет нижней прокладки и нижней границы, а нижнее поле ребенка не рушится с верхним полем, которое имеет зазор.

  ... Если верхнее и нижнее поля коробки примыкают друг к другу, то возможно, что поля свернутся через него. В этом случае положение элемента зависит от его связи с другими элементами, поля которых разваливаются.

  • если поля элемента свернуты с верхним полем его родителя, верхний край границы поля определяется как тот же, что и у родителя.
  • в противном случае либо родитель элемента не участвует в свертывании поля, либо задействовано только нижнее поле родителя. Положение верхнего края границы элемента такое же, как если бы элемент имел ненулевую нижнюю границу.