Why doesn't Firefox render margin-top and margin-bottom?

Question

css

Here codepen.io/tbl/pen/CxLsH clearly shows what I'm stuck on
Rule:

div {
  margin: 1%;
}

In Chrome, it gives the expected padding around the block. Firefox only has padding on the right and left.
Unfortunately, toster does not allow you to upload a picture for comparison, where you can see two browsers at once.

Answer 1

learn.javascript.ru/height-percent
Read how the percentage of heights is calculated.
The flexbox standard says the following:

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.