Firefox中垂直边距/填充百分比的Flexbox已损坏

Question

所以问题是当我使用百分比来填充弹性框内的元素的填充/边距顶部/底部时，Firefox会忽略它们，所有其他浏览器似乎都能正常工作。

请参阅Chrome中的代码段，然后在Firefox中查看结果：

 * {
	box-sizing: border-box;
 }
 .box {
	width:32.5%;
	margin-right:1.25%;
	margin-bottom:1.25%;
	border: 1px solid red;
	padding: 2%;
 }
 .last {
	margin-right:0;
 }

<div style="display:flex;flex-wrap:wrap;">
	<div class='box'>
		<div>BOX<br>new line</div>
	</div>
	<div class='box'>
		<div>BOX</div>
	</div>
	<div class='box last'>
		<div>BOX</div>
	</div>
	<div class='box'>
		<div>BOX</div>
	</div>
	<div class='box'>
		<div>BOX<br>new line<br>one more line</div>
	</div>
	<div class='box last'>
		<div>BOX</div>
	</div>
</div>

我知道Firefox“遵循规则”应该如何定义垂直百分比，但这只会让我发疯。我还没有找到解决方法。我见过this post，但它似乎对我没有帮助。

编辑：我知道我可以使用px或em，但我想避免为多个媒体查询而这样做，因为我的设计必须是响应式的，我不想硬编码像素。