Css 在Firefox中使用宽高比和%填充元素时，Flexbox不起作用

我已使用flexbox根据本图创建了所需的元素布局：

然而，它在Firefox中似乎不起作用。Firefox不尊重设置为保持纵横比的内部元素。我已经试过了他的答案，但没有用

*请忽略flex指令缺少前缀的问题。我在代码中使用AutoRefixer，因此输出CSS将包含它们

.box{
宽度：100%；
垫底：66.199%；
背景：#eee；
位置：相对位置；
溢出：隐藏；
}
.柔性网格{
显示器：flex；
显示：-webkit flex；
弯曲方向：立柱；
最小高度：100%；
}
.flex-grid.flex-grid容器{
显示：flex！重要；
显示：-webkit flex；
flex:1！重要；
}
.flex-grid.flex-grid容器>.flex-grid子项{
右边距：20px；
边缘底部：20px；
}
.flex-grid.flex-grid容器>.flex-grid子项：类型的最后一个{
右边距：0px；
}
.flex grid.flex grid行、.flex grid.flex grid列{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
边缘底部：0px；
}
.flex grid.flex grid列{
弯曲方向：立柱；
}
.flex grid.flex grid column.flex grid子项{
右边距：10px；
边缘底部：20px；
溢出：隐藏；
}
.flex grid.flex grid column.flex grid子项：类型的最后一个{
边缘底部：0px；
}
.flex grid.flex grid列：类型的最后一个.flex grid子项{
右边距：0px；
左边距：10px；
}
.flex-grid.flex-grid-mother{
弹性：1；
自对准：自动；
}
.flex-grid.flex-grid子项{
弹性：1；
自对准：自动；
显示器：flex；
显示：-webkit flex；
-webkit柔性包装：包装；
柔性包装：包装；
}

---

您可以将固定高度添加到

.flex网格的
父级
，在本例中为
主体
，在本例中，您可以使用
100vh

或者，如果您有另一个容器，请在该容器上使用固定高度

请参阅下面的代码片段


正文{
高度：100vh；
}
.盒子{
宽度：100%；
垫底：66.199%；
背景：#eee；
位置：相对位置；
溢出：隐藏；
}
.柔性网格{
显示器：flex；
显示：-webkit flex；
弯曲方向：立柱；
最小高度：100%；
}
.flex-grid.flex-grid容器{
显示：flex！重要；
显示：-webkit flex；
flex:1！重要；
}
.flex-grid.flex-grid容器>.flex-grid子项{
右边距：20px；
边缘底部：20px；
}
.flex-grid.flex-grid容器>.flex-grid子项：类型的最后一个{
右边距：0px；
}
.flex grid.flex grid行、.flex grid.flex grid列{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
边缘底部：0px；
}
.flex grid.flex grid列{
弯曲方向：立柱；
}
.flex grid.flex grid column.flex grid子项{
右边距：10px；
边缘底部：20px；
溢出：隐藏；
}
.flex grid.flex grid column.flex grid子项：类型的最后一个{
边缘底部：0px；
}
.flex grid.flex grid列：类型的最后一个.flex grid子项{
右边距：0px；
左边距：10px；
}
.flex-grid.flex-grid-mother{
弹性：1；
自对准：自动；
}
.flex-grid.flex-grid子项{
弹性：1；
自对准：自动；
显示器：flex；
显示：-webkit flex；
-webkit柔性包装：包装；
柔性包装：包装；
}
谢谢您的回复。它部分地起作用，因为当应用时.box元素不再保持它们的纵横比，这对我来说是至关重要的。思想？