Q:

Why does this flex item have its height limited?

I've stumbled across something that happens to my flex child items, illustrated in this JSFiddle.
This is the code:
<div style="position:absolute; top:10px; left:10px; background-color:yellow; height:50px; width:200px; display:flex; flex-direction:column;">
    <div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text<br>inner div text<br>inner div text</div>
</div>

<div style="position:absolute; top:10px; left:250px; background-color:green; height:50px; width:200px;">
    <div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text<br>inner div text<br>inner div text</div>
</div>

<div style="position:absolute; top:200px; left:100px; border:1px solid black; height:300px; width:300px; overflow:hidden;">
    <div style="overflow:hidden;">
        Why does the inner div on the yellow left have its height limited to that of its container, but not the inner div on the green right?  As far as I can tell there are 4 things combined that trigger this:<br>1) the container has position:absolute<br>
        2) the container has a fixed height/width<br>
        3) the container is flexbox<br>
        4) the flex item has overflow:hidden<br><br>But I can't find anything exactly in the flexbox spec to cause this behaviour.  Why is it happening?
    </div>
</div>

Basically, the flex item inside a flexbox container with a fixed height is getting its height limited to that of the flexbox container when overflow:hidden is set.  On the other hand, an equivalent div inside a fixed height non-flex container just expands to the size of its content.
Where in the flexbox spec is this behaviour specified?  Is it just a browser quirk?  That seems unlikely as it happens in Firefox, Chrome, and IE.  Assuming it is well-defined flexbox behaviour, I'd like to know exactly how and when it is triggered.  Also note that when you remove overflow:hidden from the child (not the container), its height stops getting limited.

A:

OK, I think I figured out what's happening.
Up until flexbox, there was no way to cause an element to be smaller than the size of its content without explicitly settings its width/height.  With flexbox, there is a second way.
Para 9.11 of the flexbox spec talks about how to calculate a flex-item's cross size.  Basically if the flex item has align-self: stretch set (which in my example it does), it will try to fill the container's flex line (in my example the vertical line, ie. height).  This is implicitly setting the flex item's height, without explicitly using the height property.  The container itself needs to have a definite height, too, to be handed down to the flex item (in my example the container's height is explicitly set through the height CSS attribute, which I guess ultimately needs to be done at some point in the chain).
However, two conditions need to be met: the browser needs to want to resize the item, and the item needs to be resizable.
To make the browser want to resize the item, it needs to be a flex item that meets the conditions mentioned above for its cross size (which ultimately may determine its width or height) to be calculated by the browser with relation to its container's cross size.
To make the item resizable in this context, it needs to both not have flex-shrink set to 0 (note that flex:none is shorthand for setting flex-shrink to 0, amongst other things), and have overflow:hidden set (presumably giving the browser "permission" to resize the flex item such that its content will be larger than it, and get hidden).  Only then will the browser actually resize the flex item itself.
This is notably different behaviour to what happens outside the flexbox model, where the child of a fixed height/width container may have it content clipped, but it will retain the necessary size to hold its content.  Part of the content will merely be hidden.  Here, the flex item really is being (potentially) resized to be smaller than its content, which has quite important implications (particularly if you want a child element to have a scrollbar for its content).

