firefox中的不同填充和flexbox中的铬

Question

考虑以下示例：

https://jsfiddle.net/c9pky9v1/

这在Firefox 52.0和Chromium 56.0中呈现相同

现在只需添加：

#content > * {
    padding-top: 15%;
    padding-bottom: 15%;
}

https://jsfiddle.net/p3nrkgoq/

突然渲染的网站出现了分歧：

铬：

火狐：

为什么会这样，以及如何防止它？

请注意，此重置已经徒劳无功：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}