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/
margin: 0 12%;
margin: 0 0 150px;
display: flex to the upper most parent element, in this case
I also gave
height: 100%. Tested in FF 34.0.5