html - 在 Flexbox 中保持 div 的纵横比似乎在 Firefox 中不起作用

Question

我在使用 Firefox 中的 flexboxes 的某些功能时遇到问题。我正在尝试使用 padding-bottom 作为父级的百分比来保持 flexboxes 内 div 的纵横比，它在 Chrome、Opera 和 IE 中工作得非常好。症结在于 Firefox，整个事情似乎都崩溃了。测试包装没有达到应有的高度。

这只是我应该提交给 Mozilla 的边缘案例错误，还是有我可以使用 CSS/HTML 解决的解决方案？我们之前一直使用调整大小的图像来保持纵横比，但加载弹出窗口是 Not Acceptable 。我在下面包含了一个问题示例，并在此处制作了一个 jsfiddle:http://jsfiddle.net/sxxbqtnb/2/

.test {
    position: relative;
    height: auto;
    margin: 0 12%;
    background-color: transparent;
}
.test-wrap {
    width: 100%;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.test-inner {
    position: relative;
    height: 0;
    width: 31%;
    display: inline-block;
    margin: 0 0 150px;
    padding-bottom: 18%;
    background-color: #666;
}

<div class="test">
    <ul class="test-wrap">
        <li class="test-inner"></li>
        <li class="test-inner"></li>
        <li class="test-inner"></li>
    </ul>
</div>

*编辑以清理我的 css

Answer 1

尝试将 display: flex 添加到最上面的父元素，在本例中为 .test

我还给了.test-inner height: 100%。在 FF 34.0.5 中测试

JSFiddle Link