[csswg-drafts] [css-flexbox] flexbox spec isn't interoperable w/ existing implementations, RE `flex-basis` resolution for table wrapper box flex-items

dholbert has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox] flexbox spec isn't interoperable w/ existing implementations, RE `flex-basis` resolution for table wrapper box flex-items ==
I recently implemented the [keyword `flex-basis:content`](https://bugzilla.mozilla.org/show_bug.cgi?id=1105111), and implemented the spec behavior on [treating used `flex-basis:content` as `max-content`](https://bugzilla.mozilla.org/show_bug.cgi?id=1374540).  (This includes treating `flex-basis:auto;[main-size-property]:auto` as `max-content`.)

However, this creates a bit of a problem for an annoying edge-case -- table wrapper boxes as flex items.

Table wrapper boxes do *not* receive the author's specified `width/height` nor `flex-basis` value[1], so they always necessarily have `flex-basis:auto;[main-size-property]:auto`, which means they **always** have a used flex basis of `content`.  This means (per the current spec) they should **always** resolve their flex base size to their `max-content` size.

But I've found that's problematic for scenarios like this:
````
<flexbox style="width:300px">
  <table style="width:100%"></table>
</flexbox>
````

Right now, Firefox 59/Edge/Chrome all render content like that ^^^ with the table being 300px wide.  But with my attempt at implementing the current spec text, Firefox Nightly ends up resolving the flex base size by sizing the table-wrapper as `max-content`, and that means we can't resolve the 100% width on its child box (the table box) because by definition max-content sizing is independent of the surroundings; and so the `100%` ends up getting treated as `auto` and we end up collapsing the table to its actual content-size, which might be 0 instead of 300px, depending on what it actually contains.  So, we end up with a flex base size of 0px (or whatever the content size is), rather than 300px.  This is what really happened in Firefox Nightly with my changes, and it [caused problems in a real website](https://bugzilla.mozilla.org/show_bug.cgi?id=1455976) (a French flight booking site).

The spec needs to say what should happen here -- should table-wrapper-box flex items really always get a flex base size of their max-content size? (which is what the spec calls for, but no official UA release implements, aside from current Firefox Nightly I think)  Or should they do something subtler, e.g. maybe using the fit-content size in this scenario? (which, unlike max-content, is allowed to take the available space into consideration)  Or should they do something else?

[1] The spec says that `order` and `align-self` apply to the table wrapper box, but "like `width` and `height`, the `flex` longhands apply to the table box..."  (And then there's some special case about how table boxes should work with flex layout, but it seems to me that this special-case text is all post-flex-base-size resolution.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2604 using your GitHub account

Received on Monday, 23 April 2018 02:19:40 UTC