1424260 - display: flex tables with % margins have calculated margin of 0px

Status: RESOLVED DUPLICATE of bug 958714

(Core :: Layout: Tables, defect)

Description

[admin]

Attachment: screenshot incl dev tools

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

Steps to reproduce:

Say there are several tables within a div, which has display = "flex";

Each table has a margin of 0.75% 1% which should result in calculated px values for bottom, left, right and top.

FF - 58.0b9 (64-Bit)
Nightly - 59.0a1 (2017-12-07) (64-Bit)
Developer - 58.0b9 (64-Bit)

will all calculate margins of 0px for top and bottom, resulting in colliding tables.


Actual results:

margin-bottom: 0px;
margin-left: 16.2333px;
margin-right: 16.2333px;
margin-top: 0px;


Expected results:

margin-bottom:12.9531px;
margin-left:17.2812px;
margin-right:17.2812px;
margin-top:12.9531px;

Comment 1

[Daniel Holbert [:dholbert]]

This is bug 958714.

Briefly, the spec allows percent margin-top to *either* resolve against the container's height (and produce 0 if the container's height depends on the content, as it probably does in this case), *or* resolve against the container's width.

Firefox & Edge do the former, because this is what the spec originally required. Chrome & Safari do the latter.

There's a renewed spec discussion on this, per recent comments on bug 958714, so there may be action here soon.

Comment 2

[yisibl]

About 2: the consistency of the distance has not been established. Because the specification is now clear that the Flexbox can adjust the distance through the gap property. https://drafts.csswg.org/css-align-3/#gap-shorthand

Comment 3

[Daniel Holbert [:dholbert]]

Yeah, that "gap" change is tracked in bug 1398483.