[css-align][css-flexbox] Should align-self and flex (& its subproperties) be honored on table wrapper box?

[dholbert]

Load https://jsfiddle.net/vhomvqor/3/ in Firefox, Edge, or Chrome. This testcase has a flex container, with a display:table child inside of it. That child has flex:1 and align-self:flex-end.

For some reason, Chrome / Edge / Firefox all interoperably honor align-self but do not honor flex:1 on the child.

I'm curious if we're all somehow correct (I think we're probably not), or whether we need to make this consistent & get it specced.

Technically, I think ignoring these properties is the most spec-compliant thing to do, since the flex item here is really the table wrapper box, and the table wrapper box isn't author-stylable & only honors a strict whitelist of properties that it takes from its table box (and all other properties should be at their initial values), as described in CSS2 section 17.4: https://www.w3.org/TR/CSS2/tables.html#model

But subjectively, I think the spirit/intent of that table spec-text is something like: "if a property is meant to be used by an element's container, it should be used on the table wrapper box." (Maybe I'm interpreting it too broadly, but that seems like a reasonable behavior.) If this interpretation is correct, then both align-self and flex would fit the bill...

Perhaps the flexbox spec (and css-align spec) should include some normative text that broadens the list of a table's properties that are used on the table-wrapper-box?

[dholbert]

Perhaps the flexbox spec (and css-align spec) should include
some normative text that broadens the list of a table's properties
that are used on the table-wrapper-box?

We probably need this for the grid spec, too, for all of its properties that apply to grid items (e.g. grid-row, grid-column).

Also, I should clarify one thing -- when I say table wrapper box, I'm specifically talking about the special parent-box that lives outside of a table box and its caption, as defined in CSS2 section 17.4. I'm not talking about the anonymous table "wrapper" that might be generated to contain a naked <td> element, for example.

[gregwhitworth]

Somewhat related to this, is this discussion - albeit about composited based properties #324

[yisibl]

Oper 12 almost all flex item (with display: table) elements are rendered in line with expectations.

[fantasai]

Yes, you're right about the spirit of the split: all new properties, if they apply to tables at all, need to specify whether they apply to the table box or the table wrapper box (because they don't apply to both certainly), and the alignment properties, grid placement properties, and flex clearly belong to the wrapper box category. CSS2.1 can only make this judgement for properties in CSS2.1.

I'm not sure, atm, what's a good way of representing this information. :) It falls along the lines of "does this property apply to ::first-line"?

[tabatkins]

Looks like we had text for this in the past, but deleted it: https://drafts.csswg.org/css-flexbox/#change-2015-anonymous-fixup. I assume that we accidentally assumed the references to "table wrapper box" were referring to the anonymous table box that gets wrapped around bare table-cells/etc during box-tree fixup.

Should we just restore it? Everyone's interoperable, but with clearly wrong behavior.

[FremyCompany]

My opinion is the other thread (#948).

TLDR: I am fine with adding text to hoist flex/align-*/etc in the tables spec, I just continue to think it would be easier to stop pretending we don't just want the table-wrapper box to be the box generated for the <table> element. We are bothering ourselves with a box that is absolutely not useful and creates ton of implementation complexity. If someone proposed this non-sense today, everybody would be objecting to it.

[FremyCompany]

FWIW it has been resolved in today's call to restore the deleted text in flex, and continue to work on a more general level in another, separate github issue. I'll crosslink that new issue here when I get to file it.