[css3-flexbox] flex-align: stretch on <img>

I think just ran across a simple case where "flex-item-align:stretch"
(the default behavior) is somewhat problematic.

Consider this example (where "photo.jpg" is a 50px-by-50px image):

 <div style="display: flexbox; width: 100px; height: 100px">
   <img src="photo.jpg"/>
 </div>

The <img> has an intrinsic height and width, which the author presumably
wants to use, since he hasn't specified any other width or height there.

However, since the <img> has "height: auto" and effectively
"flex-item-align:stretch" (default values), the flexbox spec says we
need to force the <img>'s height property to resolve to 100px:

# stretch
#   If the cross size property of the flexbox item is ‘auto’,
#   it resolves to the length necessary to make the cross size
#   of the item's margin box the same size as the line, while
#   still respecting ‘min/max-width/height’ constraints as normal.
http://dev.w3.org/csswg/css3-flexbox/#flex-item-align

So we'll end up with a photo that's stretched out vertically --
50px-by-100px.

There are a few ways to hack around this, of course -- you could specify
a different "flex-[item-]align" value, or specify an explicit height on
the image, or wrap the image in a div.

Still, this seems like pretty bad default behavior for a pretty simple
use case.  Are we sure that "flex-align:stretch" is what we want as the
default behavior?  (Or: are we sure that the behavior of 'stretch' is
specced correctly?)

~Daniel

Received on Wednesday, 25 April 2012 21:03:15 UTC