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

[css-align][css-flexbox] Should "justify-content: stretch" ever be able to make flex items grow?

From: Daniel Holbert <dholbert@mozilla.com>
Date: Wed, 11 Nov 2015 11:50:52 -0800
To: www-style list <www-style@w3.org>
Message-ID: <56439C1C.9090307@mozilla.com>
The css-align spec adds a new value, "justify-content: stretch", for
stretching children to fill space in the main axis.  I think the spec
editors didn't intend for this value to do any stretching on flex
items.[1]  However, I believe it's currently specced such that it
*would* impact flex item sizing.

Specifically, "stretch" is specced like so:
   # If the combined size of the alignment subjects is less
   # than the size of the alignment container, any auto-sized
   # alignment subjects have their size increased equally
   # (not proportionally), while still respecting the constraints
   # imposed by max-height/max-width, so that the combined size
   # exactly fills the alignment container.
https://drafts.csswg.org/css-align-3/#valdef-content-distribution-stretch

As I understand it, that spec text would mean we should stretch each of
the flex items in the following example, despite their (default)
flex-grow:0 values:

 <div style="display:flex; width: 500px; justify-content: stretch">
   <div>Hello</div>
   <div>world</div>
  </div>

I can also imagine trickier cases where we might need to do both flexing
*and* stretching, if we have e.g. "flex-grow: 0.1" on our flex items.
The items would grow to absorb 10% of the free space [probably leaving
some space unused], and then maybe "stretch" would force them to do a
second round of growing to absorb the rest of the space... maybe?

Part of this might boil down to the meaning of "auto-sized" in the spec
text above... Maybe that's the term that needs a bit of
expanding/clarification here?  (because I think the flex items in my
sample code above are arguably "auto-sized")

In any case, if we don't want any bonus stretching to happen in these
cases (and I think we don't), css-align needs a bit of clarification on
this point.

Thanks,
~Daniel

[1] per fantasai "it doesn't make sense for flexbox"
https://lists.w3.org/Archives/Public/www-style/2015May/0045.html
Received on Wednesday, 11 November 2015 19:51:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:58 UTC