W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [css3-flexbox] Children of flex items ignoring cross-axis percentage length

From: Ojan Vafai <ojan@chromium.org>
Date: Tue, 9 Oct 2012 10:50:40 -0700
Message-ID: <CANMdWTsoWdQsK2H0Qtwd3fsekb5Y1MSui_ZLKibc_Zv0cMxjtQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Rudolph Gottesheim <r.gottesheim@loot.at>, Morten Stenshorne <mstensho@opera.com>, "www-style@w3.org" <www-style@w3.org>
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 <a>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
Received on Tuesday, 9 October 2012 17:51:30 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:20 UTC