6

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

John Saunders
  • 160,644
  • 26
  • 247
  • 397
Lee Dvorak
  • 63
  • 1
  • 4

2 Answers2

3

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

scniro
  • 16,844
  • 8
  • 62
  • 106
3

This is actually a bug in Chrome. I was using the same technique to create an aspect ratio locked element and it was fine in Chrome and broken in Firefox.

I reported it to Mozilla and it turns out that Firefox is correct and Chrome is buggy.

Elements when given margin or padding in the top or bottom directions should base it on the parent elements width. However, when the parent is a Flex item or a Grid item then it should base it on the height instead.

No idea why. They've just decided to change it. Here's the Chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=229568

I wish it was just standardised one way or another. If it is to stay the Firefox way then I would love to know a method of creating a ratio-locked element when it's a flex or grid item.

rctneil
  • 7,016
  • 10
  • 40
  • 83