RE: [css-flexbox] Behaviour of percentage heights in column direction

Daniel Holbert wrote: 
> Specifically, I'm curious about this scenario:
>   http://jsfiddle.net/2jftbvyk/

> (Basically, we have a vertical flex item with a percent-height child, and which
> derives its min-content height from a tall grandchild.)
> 
> UNCONTROVERSIAL: The flex item there -- bordered in orange -- should end
> up at 200px (taller than its black-bordered parent), because "min-
> height:auto" prevents it from being smaller than its blue fixed-height
> grandchild.
> 
> CONTROVERSIAL:
> The question is, should that (orange) flex item's height be considered
> "definite"?
> 
> According to flexbox section 9.8 #2, the answer is "no" -- it's not definite --
> the flex item happens to have a non-definite flex-basis (from "flex: 0 1
> auto"), which means its final flexed height is not considered definite.
> 
> But, the interesting part: if we happen to give it "flex: 0 1 0px" (or even "flex:
> 0 1 100px") instead, then it will *still* end up at a height of 200px (again, from
> min-width:auto). BUT, now the spec says that final height SHOULD be
> considered definite, for some reason -- simply because we started at (and
> immediately discarded) a definite flex-basis.
> 
> This inconsistency doesn't make sense to me, though I don't think I have a
> concrete suggestion for improvement yet.
>

Since the flex container explicitly determines the main axis sizes of each item by the flex algorithm, I'd argue that the main axis size of a flex item should be considered definite.

In Chrome, FF, and IE, a nested flex container will flex its children up to the given height:

http://jsfiddle.net/7s1w4wen/


and I don’t think a percentage height should be any different?  That is, if the inner flex in this example uses its main axis size to flex its child (.inner-child), shouldn't a percentage height also resolve against said main axis size?

-Peter

Received on Monday, 9 February 2015 22:24:12 UTC