Daniel Shelepov Reporter
	Description • 10 years ago

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Steps to reproduce:

go to http://jsfiddle.net/0wdwg8ch/

or open the attached repro

Chrome version tested: 39.0.2171.95
IE version tested: 11.0.9600.17498
Firefox version tested:34.0.5


Actual results:

Footer item is placed at the bottom of the middle flex item (which is overflowing and does not fit into the flex box)


Expected results:

Footer item is placed at the bottom of the flex parent (like in IE, Chrome)

	Boris Zbarsky [:bzbarsky]
	Comment 1 • 10 years ago

Styling #main with min-height:0 makes the rendering match Chrome.  So this looks like yet another instance of min-height defaulting to "auto" on flex items instead of 0.  That's a recent spec change that we've updated to but Chrome and IE haven't yet.

	Daniel Shelepov Reporter
	Comment 2 • 10 years ago

(In reply to Boris Zbarsky (Vacation Dec 15-31) [:bz] from comment #1)
> Styling #main with min-height:0 makes the rendering match Chrome.  So this
> looks like yet another instance of min-height defaulting to "auto" on flex
> items instead of 0.  That's a recent spec change that we've updated to but
> Chrome and IE haven't yet.

I appreciate the fast response.  This allows me to deploy a one-line fix that fixes the issue on my page.  

Hopefully the spec will stabilize and reach CR soon.

	Daniel Holbert [:dholbert]
	Comment 3 • 10 years ago

Yup, we're matching the spec here (and Chrome is not). (IE Tech Preview probably matches our rendering, too, as they've implemented "min-width:auto" there.)

Specifically, we're seeing the "height: 200px" on ".main" (which the spec calls the "clamped size" in its diagram / description at http://dev.w3.org/csswg/css-flexbox/#min-size-auto ) and we're using that as the min height, and refusing to shrink smaller than that.

As bz indicates, you can override this by providing a different "min-height" value (since this behavior is triggered by the new default "min-height:auto" value.)

	Daniel Holbert [:dholbert]
	Comment 4 • 10 years ago

(In reply to Daniel Holbert [:dholbert] from comment #3)
> Yup, we're matching the spec here (and Chrome is not). (IE Tech Preview
> probably matches our rendering, too, as they've implemented "min-width:auto"
> there.)

(Sorry, I meant "min-width:auto *and* "min-height:auto" -- it's really "min-height" that matters in this case, of course.)