W3C home > Mailing lists > Public > www-style@w3.org > August 2013

[css3-flexbox] Should "align-self:stretch" have any effect on main-size? (i.e. should stretched cross-size be used for establishing main size?)

From: Daniel Holbert <dholbert@mozilla.com>
Date: Mon, 19 Aug 2013 23:28:07 -0700
Message-ID: <52130C77.5080802@mozilla.com>
To: www-style list <www-style@w3.org>
Hi www-style,

Question: Should "align-self: stretch" on a flex item (stretching it in
the cross axis) be able to have any effect on a flex item's main size?
(in the absence of any intrinsic-ratio effects)

>From my reading, the answer from the current flexbox ED is "no" -- the
spec's algorithm *first* establishes the main size of flex items and of
the flex container (in section 9.2 through 9.3), and it only takes
"align-self:stretch" into account when we're midway through section 9.4.
 But Chrome and Opera don't seem to match my expectations, and I like
their behavior & think we might want to amend the spec to explicitly
call for their behavior.

Consider this testcase:
http://people.mozilla.org/~dholbert/tests/flexbox/can-stretch-affect-main-size-1.html

That testcase contains two examples, which only differ in their
"align-items" value on the outermost (vertical) container.

In Chrome & Opera, the first example (the one with "stretch") has a
reduced height (main-size) with respect to the second example (the one
with flex-end.)

I think this is incorrect, per spec (as noted in my 2nd paragraph
above). However, I think the behavior makes sense; if we know up-front
that we're eventually going to be stretching a vertical flex item's
width, and we can compute what its stretched width will be, and we have
to do a trial layout to establish a hypothetical height, then I think it
makes the most sense to do that trial layout *using the stretched
width*.  I'm guessing that's what Chrome and Opera are effectively
doing, though I'm not sure.

We could make this change by extending this existing spec text,
from section 9:
 # For the purposes of these definitions, a definite size is [...]
 # If a single-line flex container has a definite cross size,
 # any flex items with ‘align-self: stretch’ must also be treated
 # as having a definite cross size
http://dev.w3.org/csswg/css-flexbox/#layout-algorithm

This chunk is just defining what "definite" means; it's not
mandating that we *use* this "definite" size for laying out our
flex item. But I think it, or the spec text following it, should be
amended to actually call for using the stretched cross-size when
establishing an item's main size, under the conditions laid out in the
spec-text quoted above. (single-line container, with definite cross size)

Thoughts?

Thanks!
~Daniel

Spec reference:
Received on Tuesday, 20 August 2013 06:28:35 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 20 August 2013 06:28:36 UTC