Почему Firefox не отображает margin-top и margin-bottom?

Question

[TimLee]

Здесь codepen.io/tbl/pen/CxLsH наглядно видно на чём я застрял
Правило:

div {
  margin: 1%;
}

В Chrome даёт ожидаемые отступы вокруг блока. В Firefox отступы есть только справа и слева.

К сожалению toster не даёт загрузить картинку для сравнения, где видно сразу два браузера.

Answer 1

[whats]

learn.javascript.ru/height-percent

Почитайте как вычисляется процентная часть от высот.

В стандарте флекс бокса написано следующее

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

Comments

[TimLee]

Исчерпывающе
Спасибо