1091326 - Vertical percentage margin computed to 0 when using box-sizing: border-box

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout, defect)

Description

[Chris Blackwell]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36

Steps to reproduce:

I've created a codepen to demonstrate (http://codepen.io/chrisblackwell/full/FqGwu). 


Actual results:

In Webkit, Blink or IE, there is margin between the boxes. But in FireFox, the bottom margin is not being applied.


Expected results:

The boxes should be separated by the margin defined.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This seems to be flexbox-specific... Daniel, could you take a look?

Comment 2

[Daniel Holbert [:dholbert]]

The testcase has a vertical-axis percent-valued margin, which per spec should resolve against the *height* of the flex container.  The flex container has no specified height, so the margin ends up resolving to 0.

This is an expected result of bug 851379, which is a spec-change that so far, we are the only ones to implement. Other browsers resolve the percent-valued margin-bottom against the container's *width* (which is correct for a block container, but not for a flex container).

IIRC, Microsoft folks have expressed an intention to implement the change on www-style, so they should match us before long. For Chrome, https://code.google.com/p/chromium/issues/detail?id=229568 has been filed since April of last year; it's unclear if/when they'll fix that & align with the spec on this. :-/

Marking this as a dupe of bug 958714, which someone filed when hitting this a while back.