Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Heights for flexbox children intrinsically-sized with CSS are not computed properly in Firefox #87
When using the CSS intrinsic-sizing method to force an element to maintain an exact aspect ratio, Firefox computes the height as
This might be related to Flexbug 5, I am not sure. The height for these intrinsically-sized flex children appear to be properly computed in IE11, Chrome 45.0.2454.101 (64-bit), and Safari 9.0.
I think there is still some dispute about the correct behavior here. As it stands now, percentage-based top/bottom paddings resolve against
Also, according to this thread, percentages that are based on the height of an element that is itself based on its content always resolve to
As a simple workaround, you can always just put a block element inside the flex item to avoid this issue altogether.
Late 2015 the spec got updated, now allowing both:
So it's not really a "flexbug", although it can leave one (including me) confused at first.
It is acknowledged in the spec itself that the “wiggle room” created by this change is not ideal:
Above that it's also not advised to use the CSS intrinsic-sizing method method until this is resolved:
Related browser bugs:
As recommended above it's easy to bypass this issue by nesting an extra element inside your flex item. Here's a simple demo: https://codepen.io/bramus/pen/wqKbWq
Quoting @atanassov (Edge):
Quoting @dholbert (Firefox):
There's a lot of activity going on on the Firefox-related bug so I guess there's a chance we might see this change land rather soon.