Note to self: Firefox handles inherited height differently

Unlike Chrome and Safari, elements in Firefox don’t automatically inherit their heights from the containing element. So elements with implicit height (eg. images) will stretch the containing element to to their full height.

To prevent this happening, each descendant element of a container with a height must have either and explicit heigh (probably height: 100% or height: inherit. Note that IE7 doesn’t support inherit as a value for height.

See this pen for a test case.

I’m not clear which browser is out of spec on this.