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

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

From: Kang-Hao (Kenny) Lu <kanghaol@oupeng.com>
Date: Tue, 30 Oct 2012 15:54:48 +0800
Message-ID: <508F87C8.1020105@oupeng.com>
To: Ojan Vafai <ojan@chromium.org>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Rudolph Gottesheim <r.gottesheim@loot.at>, Morten Stenshorne <mstensho@opera.com>, WWW Style <www-style@w3.org>
(12/10/10 1:50), Ojan Vafai wrote:
> 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.

It does work in both Opera Next and Chrome Canary, but I am not exactly
sure why it should per spec.


This is what I think:

  # 8. Calculate the cross size of each flex line.
  #
  # If the flex container has only a single line (even if it's a
  # multi-line flex container), the cross size of the flex line is the
  # flex container's inner cross size.
  #
  # Otherwise, for each flex line:
  # ...

For a normal 'flex-flow: row' flex container with 'height: auto', you
can't really get the cross size of the flex line from the flex
container's inner cross size so I had assumed this step is actually saying

A.

  | If the flex container has only a single line (even if it's a
  | multi-line flex container) and a definite cross size, ...

but then there's

  # 15. Determine the flex container's used cross size:
  #
  #   * If the cross size property is a definite size, use that.
  #   * Otherwise, use the sum of the flex lines' cross sizes.

So, in the hacky solution (nested flex containers), since the cross size
of a 'align-self: stretch' flex item isn't definite (or percentage
height should have worked). The used cross size of the flex container,
being a flex item, is the sum of the flex lines' cross sizes. If the
cross sizes of the lines are found by finding the maximal cross size of
the inner flex items then the hacky solution wouldn't work as expected.
Therefore, 'align-self: stretch' should fall into the premise of Step 8,
but then 'align-self: stretch' isn't definite...

So, I assume the correct statement of the branch in Step 8 is something like

B.

  | If the flex container has only a single line (even if it's a
  | multi-line flex container) and a definite cross size or the cross
  | size is fixed in some other means such as 'align-self: stretch', ...

. Am I right? I am not sure what these "other means" would include so I
hope this can be clarified.

Or perhaps, as the reporter suggested, can we make 'align-self: stretch'
amount to a definite size and have percentage height just work in a
'align-self: stretch' item?



Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/
Received on Tuesday, 30 October 2012 07:55:33 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT