RE: [css-flexbox] max-content contribution not defined for flex items

>The spec currently defines the max-content contribution of a flex item as its
>hypothetical base size. However, I don't think this works correctly for flexible
>items with a definite flex base size.
>In particular, notice
>   # For each flex item, subtract its flex base size from its
>   # max-content contribution size,
>This calculation will end up at zero for items with "flex: 1", when the intention
>was for it to tend up at the max-content size.
>
>Proposed definition:
>
>  | The max-content main-size contribution of a flex item is:
>  |   * if the item is growable, max(max-content, flex base size)
>  |   * otherwise, its flex base size
>  | clamped by its min and max main size properties.

+Christian and Daniel since we have discussed similar things in regards to implied minimum sizing and IMO influences my opinion on Christian's recent question regarding QME

Coincidentally this is something that we were "just" discussing internally in regards to how to take into account the main-size contribution in regards to Christian's[1] question regarding QME and we were hung up on this line in the spec. Our one question (although with anything in flex it's intertwined with everything) is how to determine min-content/max-content contribution of a flex item when considering the base size, hypothetical main-size and the main-size property (which you don't seem to be taking into account).

Here is an example of what we're trying to resolve: http://jsfiddle.net/gpzo4hvL/2/


What should the width of each item be, and ultimately the width of the container?

I don't have a passionate opinion one way or the other, but wanted feedback on what everyone felt, based on the current language (and Elika's updated language mentioned above) should resolve to.

Currently in Edge (to save people from having to spin it up):
The container is set to 0, based on the language that Elika is now trying to correct, since the flex items have a definite size of 0px, and thus the container goes to flex the items but there is no flexible space.

What I think should occur, is the following (sorry I'm going to use pseudo code)

1. declared-main-size = Resolve any conflicts between min,max,main size properties (this is similar to how block boxes work)
2. max-declared-size = Resolve conflict between declared-main-size and flex basis 
3. Then do what you set above but taking all three potential ways to set the main size into account: max(max-content, max-declared-size)

Step 1 is already done by FF/Chrome, this would result in declared-main-size = 100px
Step 2 would result in max(100px, 0px) = 100px
Step 3 would result in: max(100px, 300px) = 300px

This will end up with the first item having a width of 302px (content + border)
The second will be 102px wide (content + border)
The container will be 414px (items + border)

I have attached a screenshot showing Chrome/FF/Edge on Windows10.

Let me know your thoughts.

~Greg

[1] https://lists.w3.org/Archives/Public/www-style/2015Aug/0027.html

Received on Friday, 7 August 2015 01:11:50 UTC