在Flexbox中保持div的长宽比似乎不适用于Firefox [英] Maintaining the aspect ratio of divs inside a flexbox seems to not work in Firefox

问题描述

我在Firefox中遇到一些Flexbox的功能问题。我试图使用padding-bottom保持flexboxes中div的长宽比作为父级的百分比，并且在Chrome，Opera和IE中工作得非常好。这个问题的关键在于Firefox，整个事情似乎在崩溃。测试包裹没有达到应有的高度。

这仅仅是一个我应该提交给Mozilla的边缘案例，还是有解决方案，我可以用CSS / HTML做些什么？我们以前一直在使用大小调整图像来保持宽高比，但是加载弹出是不可接受的。我已经包括了一个下面的问题的例子，并在这里做了一个jsfiddle： http://jsfiddle.net/sxxbqtnb / 2 /

.test {position：relative;身高：自动;保证金：0 12％; background-color：transparent;}。test-wrap {width：100％; list-style：none;填充：0;显示：flex;证明内容：空间之间; flex-wrap：wrap;}。test-inner {position：relative;身高：0;宽度：31％;显示：内联块;保证金：0 0 150px;填充底部：18％;

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

清理我的CSS一点

解决方案

尝试添加 display：flex 最上面的父元素，在这种情况下 .test

我也给了 .test -inner height：100％。在FF 34.0.5中测试

JSFiddle Link

I'm having a problem with some functionality of flexboxes in Firefox. I'm trying to maintain the aspect ratio of divs inside flexboxes using padding-bottom as a % of the parent and it works absolutely fine in Chrome, Opera, and IE. The sticking point is in Firefox, where the whole thing seems to break down. The test-wrap is't getting a height as it should.

Is this simply an edge-case bug that I should submit to Mozilla or is there a solution to this that I can do with CSS/HTML? We had previously been using resizer images to maintain the aspect ratios but the loading pop-in was unacceptable. I've included an example of the problem below and also made a jsfiddle here: 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>

*edited to clean up my css a bit

解决方案

Try adding display: flex to the upper most parent element, in this case .test

I also gave .test-inner height: 100%. Tested in FF 34.0.5

JSFiddle Link

这篇关于在Flexbox中保持div的长宽比似乎不适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！