1280313 - blockify flex items to avoid anonymous table elements around table cells

Status: RESOLVED DUPLICATE of bug 1185140

(Core :: Layout: Tables, defect)

Description

[Tri Nguyen]

Attachment: flexbox-table-cells.jpg

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

Steps to reproduce:

Reproducible here:
http://codepen.io/tridnguyen/pen/KMMWMv

The "fix" is in the td style block, with the line `display: block`


Actual results:

Each `td` is wrapped with anonymous table elements, so the `flex-basis` and `order` properties of the flex items are not applied.

Adding `display: block` on the `td` fixes this.

More description can be found here http://stackoverflow.com/questions/34599876/flexbox-on-table-doesnt-work-in-firefox


Expected results:

Please see the attached image for actual vs expected results.

Comment 1

[Tab Atkins Jr.]

Per text at the end of <https://drafts.csswg.org/css-flexbox/#flex-items>, blockification should occur *before* box-tree fixup, so the <td>s should be forced to display:block automatically (since they're children of a flexbox) and not generate any anonymous wrappers.

Comment 2

[Mats Palmgren (inactive)]

I think we have fixed this already.  I see the same result in FF as in Chrome
after removing the display:block "fix" in the codepen testcase.

Comment 3

[Daniel Holbert [:dholbert]]

mozregression says this was fixed in a range that includes bug 1185140 -- this is probably a dupe of that bug.

(The patches had actually landed a few months before this bug was filed, but they hadn't made it to release yet, I think, which is why this was still visible at that time & why the reporter ran into it, presumably.)

Comment 4

[Daniel Holbert [:dholbert]]

(fix range is https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=2b5237c178ea02133a777396c24dd2b713f2b8ee&tochange=33d36bf6ca0c9d9c22cadf6d8223fa6e1418b62c )

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Mats Palmgren (:mats) from comment #2)
> I think we have fixed this already.  I see the same result in FF as in Chrome
> after removing the display:block "fix" in the codepen testcase.

For convenience, here's a testcase with that tweak already made (which renders the way shown in the screenshot, with all text on a single line, in old builds before this was fixed in comment 4's range):

https://codepen.io/anon/pen/qXQmWM