W3C home > Mailing lists > Public > www-style@w3.org > February 2015

RE: [css-flexbox] Should "max-width" influence the resolved flex base size? (from default "flex-basis:auto;width:auto")

From: Greg Whitworth <gwhit@microsoft.com>
Date: Fri, 20 Feb 2015 20:30:32 +0000
To: Daniel Holbert <dholbert@mozilla.com>
CC: www-style list <www-style@w3.org>
Message-ID: <BN3PR0301MB0868B8B3CBDBB7DE410B23C7A42A0@BN3PR0301MB0868.namprd03.prod.outlook.com>
> The "in place of its main size" quote here means that the "width"

> property is *ignored* here, if you had e.g. "flex-basis:content; width:

> 100px". That's the goal.  But, the language does not specify whether

> *min/max-width* should be applied when doing this content measurement.

> I think they should not be applied, since they have an explicit effect later in

> the layout algorithm; but Blink's implementation disagrees.

> Given this, do you agree that the wording needs clarification, Greg?


> ~Daniel

I think there was a slight mis-communication because the fiddle you shared [1] did not have the flex-basis set to content, but to auto (which is the default value for flex-basis). I created an update adding in flex-basis: content [2] along with a ref test. Firefox and IE are doing the same thing overall, but just for clarity here is how we implemented it.

We implemented it with max/min width being taken into account when flexing the items, but not when determining the flex base size; which in this case would be max content.

To show it in a pseudo algo:

·         We do 9.2.3D which sets up the initial base size as max content (which will override "width" as seen on .item2, min/max width are not taken into account here)

·         We then do 9.3 which ends in needing to resolve flexible lengths (9.3.6) which is where we will clamp the item to the min-width or max-width respectively as stated in 9.7.4D

That said, we should clarify if min-width, max-width, min-height, max-height are to be considered a main size property[3] stated in 9.7.4D [4], and possibly an additional line that says not to take min & max width’s into account for 9.2.3D.

So, taking all of that into account,


[1] http://jsfiddle.net/jL7t19nd/1/

[2] http://jsfiddle.net/jL7t19nd/7/

[3] http://dev.w3.org/csswg/css-flexbox-1/#main-size-property

[4] http://dev.w3.org/csswg/css-flexbox-1/#resolve-flexible-lengths

Received on Friday, 20 February 2015 20:31:06 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:01 UTC