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

【问题标题】：Maintaining the aspect ratio of divs inside a flexbox seems to not work in Firefox在 Firefox 中保持 flexbox 中 div 的纵横比似乎不起作用
【发布时间】：2017-03-12 02:17:11
【问题描述】：

我遇到了 Firefox 中弹性框的某些功能的问题。我正在尝试使用 padding-bottom 作为父元素的百分比来保持 flexbox 内 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

【问题讨论】：

标签： html css firefox flexbox

【解决方案1】：

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

我也给了.test-innerheight: 100%。在 FF 34.0.5 中测试

JSFiddle Link

【讨论】：

【解决方案2】：

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

我向 Mozilla 报告了这件事，结果证明 Firefox 是正确的，而 Chrome 是错误的。

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

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

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

【讨论】：