Reply To: cross browser padding? Firefox issue

[Beverleyh]

Hmmm, it’s easier for us if you provide a reduced demo in Codepen. I’m on mobile at the mo and am somewhat limited in what I can see (a CodePen demo wouldn’t present the same difficulties) but I’m going to go out on a limb and first ask if you mean that there is no vertical margin rather than padding, because you mention height and say the boxes are touching? Maybe you’re right to say that padding is the issue – I can’t check, so just bear with me). Then I’m going to suggest that you’re currently using either margin-top or margin-bottom (or padding-top or padding-bottom), set as a percentage, to create vertical spacing? With Flexbox, right? If so, try changing the margin-top/margin-bottom value from %, to vw or em/px instead.

Reason: Flexbox doesn’t play consistently across browsers with vertical padding/margin set as %, because it’s based on the height of an element, unlike the traditional box-model where vertical padding/margin is based on an element’s width. So if there isn’t an explicit height set to calculate % from, it croaks. Edge will behave the same way as Firefox, while IE and Chrome will calculate the % fine.