[css-flexbox] Intrinsic sizes and flexibility

Hello!

There is interesting case questioned at http://toster.ru/q/170371 (in russian).

In short, it was asked to make an image with a caption beneath centered
using Flexbox. When the page is too narrow or short the image should
be smaller. I've made an example here:
http://codepen.io/GreLI/pen/RNKoxo

One can see that the image there doesn't keep its proportions. It become
smaller proportionally when page is too narrow with ‘max-width: 100%’,
but it doesn't in case of height.

When ‘max-height: 100%’ is set, image height resolves relative to the
whole ‘display: flex’ element (i.e. <figure>) height, including the
caption height. The worst part is that one can't limit the height
using wrapping element since it wouldn't have definite height.
(And in case of setting height it would resolve against the value that
was set, not the flexible one.)

I guess it happens because there is no place in spec that says that
replaced elements should keep it intrinsic proportions after resolving
flexible lengths.

I believe it's a considerable defect which breaks author expectations.

P.S. Initially I've sent the message from the wrong email address,
feel free to decline it from the moderation queue to avoid duplication.

Received on Sunday, 11 January 2015 15:56:24 UTC