Question

我在Firefox中遇到一些Flexbox的功能问题。我正在尝试使用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

Answer 1

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

我还给了.test-inner height: 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中不起作用

2 个答案:

JSFiddle Link