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?
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3