Lee Dvorak Lee Dvorak - 9 months ago 30
CSS Question

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

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

Answer Source

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