W3C home > Mailing lists > Public > www-style@w3.org > April 2012

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

From: Daniel Holbert <dholbert@mozilla.com>
Date: Wed, 25 Apr 2012 14:02:46 -0700
Message-ID: <4F986676.8020806@mozilla.com>
To: www-style list <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:52 GMT