A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/w3c/csswg-drafts/issues/2604 below:

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

I recently implemented the keyword flex-basis:content, and implemented the spec behavior on treating used flex-basis:content as max-content. (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 (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.)


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.5