[css3-flexbox] "flex-basis: auto" means completely different things as specified value vs. computed value

Hi www-style,

Preface: right now, the spec says:
{
  # If the value is ‘auto’ on a flex item, the computed value
  # of flex-basis is the computed value of the element's main
  # size property. Otherwise, ‘auto’ computes to itself.
[1]
}

I have two (related) concerns about "flex-basis:auto" computing to the
main size property's computed value.

MAIN CONCERN: It's weird to have a particular value ("auto" in this
case) mean two completely different things as a specified value vs. as a
computed value.
(to elaborate slightly: 'auto' as specified val means "use
main-size-property computed value as my computed value", per spec-quote
above. In contrast, 'auto' as computed val (e.g. taken from the main
size property) tells the flexbox algorithm to use our max-content size
as our hypothetical size.[2]  These are two completely different meanings.)

SUB-CONCERN: It's weird that "flex-basis:inherit" can end up inheriting
a computed value of "auto", which then deceptively makes us _ignore_ our
main-size property. (while a _specified_ value of "auto" would make us
_use_ our main-size property)

To illustrate these concerns, here's an example:

 <div id="grandparent" style="display: flex">
   <div id="parent" style="display:flex; flex-basis:auto; width:auto">
     <div id="elem" style="flex-basis: inherit; width: 50px"></div>
   </div>
 </div>

So -- what is the computed value of "flex-basis" on the innermost
element ('elem') here?  And does the "width: 50px" have any effect on
the rendering?  IIUC, the answers are "auto" and "no". (We inherit
#parent's computed value, which is the computed value of #parent's own
'width' property, which happens to be "auto". So #elem gets a computed
value of "auto". And then the flexbox algorithm tells us to treat a flex
basis of "auto" as max-content. So, we never use the 50px.)

The most bizarre part for me is this: if we took the computed value of
the "flex-basis" property on #elem, and set that as the specified value
for that property (via the style attribute), we'd end up with a
_completely different & unrelated_ computed value.  This is totally
counterintuitive.

POSSIBLE WAYS TO ADDRESS THIS:
One possible solution would be to replace flex-basis:auto with a special
keyword, e.g. "use-main-size-property".  I think this has been proposed
before & rejected, so I won't consider it further.

Another solution would be to make "flex-basis:auto" simply compute to
"auto" (as it does in the 'width' & 'height' properties[1]), and then
specify that its _used_ value (in the flexbox layout algorithm) should
look up the corresponding size property's computed value.  I believe
this is what the spec used to say, and I'm not entirely sure why we
switched away from it.

I'd really prefer that latter solution (make "flex-basis:auto" compute
to "auto") over the current specced behavior, FWIW.  That makes
style-computation / inheritance *much* saner & more straightforward.

Thoughts?

~Daniel

[1] http://dev.w3.org/csswg/css3-flexbox/#flex-basis-property
[2] http://dev.w3.org/csswg/css3-flexbox/#line-sizing

Received on Friday, 1 June 2012 22:39:06 UTC