Firefox忽略所有子元素的边距和宽度，父元素具有显示flex

Question

Firefox忽略父元素中所有子元素的所有边距和宽度，该元素的显示设置为flex，flex-direction设置为column。这在Google Chrome中发生 NOT 。有没有办法解决这个问题，除了完全删除flex？

body {  
display: flex;               
flex-direction: column;  
}
#div {
border: 1px solid green;
margin-top: 10%;
height: 100%;
}

<div id = 'div'> div </div>

小提琴

www.iscattered.com/testAll.php

Here is a description at oracle.com

Answer 1

如果您向height:100%和html选择器添加body，一切都会正常。

Answer 2

而不是在div上使用百分比，而是使用像素在firefox中运行良好。