RE: [css-flexbox] Intrinsic sizes and flexibility

> It can be seen there that the image doesn't keep its proportions. It works
> with max-width:100%, but not with max-height:100%–in this case height
> resolves relative to the whole display:flex element (<figure>) size including
> caption height. The worst part that one can't limit the height using wrapping
> element since it wouldn't have definite height. I guess that happens because
> there is no place in spec that says that replaced elements should keep it
> intrinsic proportions after resolving flexible lengths (on main axis).
> 

IE has implemented it and it supports the max-height, this can be seen in the IE TP (here is a screenshot: http://imgur.com/TPtQtMy), it does not squish the image like FF or Chrome (Chrome seems to keep it together a little bit better but does not retain the exact aspect ratio). It seems to be what you're looking for. The spec was updated to take intrinsic aspect ratio into account when setting the hypothetical main size by looking at the cross size of the item that has an intrinsic size.

Also, FF seems to be respecting this line in regards to width but not height. I should also note that I updated your so you don't have to resize the browser and just forced the height to show the image doesn't resize correctly when the main size is in the block direction in FF/Chrome (http://codepen.io/gregwhitworth/pen/jEwbXQ)

Just for testing sake I forked that one and removed column and made the height really small and Firefox resizes the image as expected (http://codepen.io/gregwhitworth/pen/mywevM) (screenshot: http://imgur.com/8Ztewum). 

Give it time and Firefox/Chrome will update their implementations regarding intrinsic sizes and you'll get the same result.

Greg

Received on Friday, 23 January 2015 00:16:15 UTC