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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With