[css-flexbox][css-sizing] Using tables in flexbox

[frivoal]

https://drafts.csswg.org/css-flexbox-1/#valdef-display-flex
https://drafts.csswg.org/css-flexbox-1/#propdef-flex
https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap
https://drafts.csswg.org/css-sizing-3/#valdef-width-fill

If you have items in a flex-box, want them be all the same size and flex up and down as long as they don't get smaller than their min-content, and wrap the flexbox otherwise, this is generally very easy:

.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex > * { flex: 1; }

However, due to the way width: auto works on tables, if one of the items is a table, it doesn't work. I believe it's expected (although I am not 100% convinced it is[1]), but if so we need a way to opt into it.

As I understand, width: fill is meant to do on anything what width: auto does on blocks, so this ought to work:

.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex > * { flex: 1; }
.flex > table { width: fill; }

However, in all current browsers that implement fill (or a prefixed version of it), it does not. Firefox, Chrome and Safari all do different things, but none fully do what I expect.

Here's a little demo: http://output.jsbin.com/diziga/

• In firefox, it takes the full width of the flex container, and wraps.
• In Chrome, it takes the full width of the container, but only wraps if there would not have been enough room when doing min-content sizing, causing overflow if there is enough room for min-content sizing. I suppose that this is a bug.
• In Safari it takes the full width of the flex container, but safari doesn't seem to be able to wrap when flex-basis is 0, so it overflows in all cases. I suppose that this is a bug.

Leaving bugs aside, it seems all browsers agree that width: fill should takes the full width of the flex container.

Reading the spec, it does not seem to call for the behavior that I expect, but then again the definition is somewhat convoluted, so I may be missing something.

Is this a problem with my understanding of what width:fill is supposed to do (and if yes, how is this problem supposed to be solved)?

Is the spec failing to define width: fill the way it should?

Are these just bugs in implementations?

---

[1] Looking at the jsbin example above, Firefox/Edge vs Blink/Webkit also have a different rendering of the table {width: auto} case, but the difference is smaller. I wonder which one is spec compliant, if any. I'm happy to submit a ref test if someone more familiar with the flex algo can clarify.

[FremyCompany]

It is my understanding width:fill should indeed behave like width:100% in this case, but I haven't looked at that very much since Edge does not support the feature at this point.

The actual problem you are having though is that your final markup is in fact:

<flex>
    <div>...</div>
    <::table-wrapper>
        <caption>...</caption><!-- moved out of <table> -->
        <table>...</table>
    </::table-wrapper>
</flex>

and applying flex:1 on <table> has no effect since it is not a direct children of the flex.

I have a very strong distaste for this wrapper thing and would totally want to remove it, it adds tons of unnecessary complexity and is not that interoperable but I haven't had much success in convincing people (especially @fantasai) that we should move to spec this instead:

<flex>
    <div>...</div>
    <table><!-- keeps most of its properties -->
        <::table-grid-area /><!-- hoists only background and border from parent -->
        <caption>...</caption> <!-- no need to move -->
        <tr>...</tr>
        ...
    </table>
</flex>

Note that there was already another bug on this, so we might want to consider merging the threads.

[FremyCompany]

Found the thread, looks like it even has recent activity :)
#547

Closing this issue and merging the threads.