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

Question

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

这只是我应该提交给 Mozilla 的边缘案例错误，还是我可以使用 CSS/HTML 解决此问题？我们之前一直使用调整大小的图像来保持纵横比，但加载弹出窗口是不可接受的。我在下面包含了一个问题示例，并在此处制作了一个 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-innerheight: 100%。在 FF 34.0.5

中测试

JSFiddle Link

Answer 2

这实际上是 Chrome 中的错误。我使用相同的技术来创建宽高比锁定元素，它在 Chrome 中很好，但在 Firefox 中损坏了。

我向 Mozilla 报告了它，结果证明 Firefox 是正确的，Chrome 有问题。

在顶部或底部方向给定边距或填充的元素应基于父元素的宽度。但是，当父项是 Flex 项目或 Grid 项目时，它应该改为基于高度。

不知道为什么。他们刚刚决定改变它。这是 Chromium 错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=229568

我希望它只是以某种方式标准化。如果要保持 Firefox 的方式，那么我很想知道一种在 flex 或 grid 项目时创建比率锁定元素的方法。

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

Maintaining the aspect ratio of divs inside a flexbox seems to not work in Firefox

html

css

firefox

flexbox

JSFiddle Link