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

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

== [css-flexbox][css-sizing] Using tables in flexbox ==
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:
```css
.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:
```css
.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 and 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.

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

Received on Tuesday, 17 January 2017 07:27:07 UTC