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.
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
Keywords: reproducible, testcase
OS: Mac OS X → All
Product: Firefox → Core
Hardware: x86 → All
Summary: Percentage margin doesn't obey if using borderbox → Vertical percentage margin computed to 0 when using box-sizing: border-box
This seems to be flexbox-specific... Daniel, could you take a look?
Component: CSS Parsing and Computation → Layout
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.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
You need to log in before you can comment on or make changes to this bug.