1315669 - Percentage based padding calculated wrongly for children of flexboxed elements

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout, defect)

Description

[Bramus]

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

Steps to reproduce:

Demo: http://codepen.io/bramus/pen/JboQre

There's a bug in firefox where percentage based padding is not calculated correctly for an element wrapped inside a flexboxed element:

- Normally percentage based padding is calculated relatively to the width of said element.
- In the scenario above the padding - all of a sudden - is calculated relatively to the height of said element.

Try toggling the "display: flex" line (used to center the content vertically) in the demo. You'll see.


Actual results:

The green box is always 56.25% of the height.


Expected results:

The green box should be 56.25% of the width (because: padding).

Comment 1

[Bramus]

This is my (Firefox) User-Agent by the way: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:49.0) Gecko/20100101 Firefox/49.0`

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Bramus from comment #0)
> - Normally percentage based padding is calculated relatively to the width of
> said element.
> - In the scenario above the padding - all of a sudden - is calculated
> relatively to the height of said element.

This is actually the behavior that the spec requires (or required, for a long time -- it's recently been relaxed to allow either behavior, because Chrome refused to implement the spec-mandated behavior).

So: not really a Firefox bug, but possibly something we'll end up acting on anyway due to interop concerns. This is tracked in bug 958714.

Comment 3

[Daniel Holbert [:dholbert]]

If you're curious, here's the current lax spec-language on this:
> Percentage margins and paddings on flex items can be resolved against either:
>
> * their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
>
> * the inline axis (left/right/top/bottom percentages all resolve against width)
>
> A User Agent must choose one of these two behaviors.
 https://drafts.csswg.org/css-flexbox-1/#item-margins


And here's the older stricter spec-language that we implemented:
> Percentage margins and paddings on flex items are always resolved against
> their respective dimensions; unlike blocks, they do not always resolve against
> the inline dimension of their containing block.
https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/#item-margins

(The older spec text mandates Firefox's behavior. The current spec text allows either Firefox or Chrome's behavior.  You might be interested to know that MS Edge matches Firefox (and the previously-strict spec) on this, too.)