Firefox Flexbox Bug - Percent-Based Padding/Margin

You You may be familiar with the trick of using padding-top: X% + background-image to create a box whose size (and contained media) is controlled by an aspect ratio. If not, read this.

The two rows below show this trick in action. In the first row, the 2-col layout is controlled by %-width and float. It behaves as expected in modern browsers. The downside, of course, is that the column heights don't line up.

To get the columns to line up like we want, we can bring in a little flexbox as in the 2nd row. Now our columns have the same height, but Firefox loses its ability to calculate %-based padding. It also loses its %-based margin-bottom.

The quickest solution (in my opinion) is to move the aspect-ratio-controlled box to something besides the flexbox -child. In the 3rd row, the aspect ratio padding-top and background-image have been moved to the ::before pseudo-element. Firefox now calculates the %-based padding correctly.

Note: earlier, the padding-top value was 24% (50% of 48%) since it's calculated based on the element's parent's width. Since the pseudo-element is 100% of its parent's width, we use padding-top: 50%; to get the right value (50% of 100%).