[css3-flexbox] stretch apply to percentage heights WAS: Children of flex items ignoring cross-axis percentage length from Ojan Vafai on 2012-10-09 (www-style@w3.org from October 2012) (original) (raw)
If a percentage height doesn't apply (e.g. because it's standards mode and the containing block is auto-sized), should stretch apply to that flex item?
Currently in WebKit and, per the flexbox spec, it does not. I don't feel strongly either way. Just want to confirm that this is the desired behavior.
On Tue, Oct 9, 2012 at 10:50 AM, Ojan Vafai <ojan@chromium.org> wrote:
On Tue, Oct 9, 2012 at 10:36 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:
On Tue, Oct 9, 2012 at 5:45 AM, Rudolph Gottesheim <r.gottesheim@loot.at> wrote:
On 10/09/2012 02:13 PM, Morten Stenshorne wrote:
The height of the "item" elements are "indefinite" (a term used in the flexbox) spec, so the percentage height on the "item" elements should compute to 'auto'.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
"If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'."
Yeah, I get that. My question is if the flexbox mechanics (e.g. align-self: stretch) should be considered setting the height explicitly.
It's plausible to do such a thing (deferring to the flex container's height), though we're not right now.
height:fill-available will do this, no? As you said, it doesn't solve this specific problem though.
However, that wouldn't help your test case, as the flex container is also auto height.
If this isn't possible (I'm no implementer, obviously), is there any way to achieve effect I'm looking for? I think it's a very common use case: a horizontal list of links (like a menu bar), where the links themselves are all the same height, even if some have line breaks and some don't.
Hm, we don't quite have a solution for this. I thought that "height: fill-available;" (from <http://dev.w3.org/csswg/css3-sizing>) would work, but it won't - it'll skip right through the flex container, too, and make the s the size of the document (or whatever the nearest ancestor with a definite size is).
If you make the flexitems themselves also be flexboxes, then you can get the desired layout: http://jsfiddle.net/GgzGf/3/
I'll note this as an issue for either the next level of Flexbox or Sizing.
If we made align-self:stretch work for blocks, that would be roughly equivalent to my nested flexboxes suggestion above.
~TJ