Thanks for posting about this issue.
This is actually that same dang known bug with FF as this one: Proportional images not working in Firefox - #4 by Brando
Basically, if you have a child of a flex container using %
based margin / padding, it will not render correctly on FF (see above post for reference).
In this case, you have some %
based padding on the flex children here:
Until Firefox resolves that bug you may consider using vh
or px
based padding. Alternatively you can build out this section layout without flexbox.
Hope this helps!