User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36 Steps to reproduce: Open example page. Actual results: The grey box grows to fit the actual pixel dimensions of the image. Expected results: Page should render with a 256px high box with the "html5 logo" image filling the grey box vertically.

You just need to add "min-height:0" on #FlexChild -- otherwise it gets "min-height:auto", which has special behavior on a flex item. (It will refuse to shrink smaller than its contents' min-content size, which is the intrinsic height of the image.) "min-height:0" on a flex item disables this behavior. Resolving as INVALID since, we're matching the spec. See http://dev.w3.org/csswg/css-flexbox-1/#intrinsic-sizes for reference.

Note that Firefox is *currently* the only shipping browser with "min-height:auto" implemented, which may make it seem like this is a Firefox bug; however, Chrome just added support for it in their development tip here: https://code.google.com/p/chromium/issues/detail?id=426898 ...and IE supports it in Spartan (their in-development next-gen engine), too. So you'll likely see them behaving like Firefox on your original testcase here (matching the spec), once those versions make it to their official browsers.