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

RESOLVED DUPLICATE of bug 958714

Status

()

defect
RESOLVED DUPLICATE of bug 958714
5 years ago
5 years ago

People

(Reporter: chris, Unassigned)

Tracking

({reproducible, testcase})

33 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Reporter

Description

5 years ago
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.

Updated

5 years ago
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
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: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 958714
You need to log in before you can comment on or make changes to this bug.