- From: Philip Walton <philip@philipwalton.com>
- Date: Mon, 23 Feb 2015 11:48:33 -0800
- To: Greg Whitworth <gwhit@microsoft.com>
- Cc: www-style list <www-style@w3.org>
- Message-ID: <CAGRhNhVs_UV3f29-_Axu3M-jEfpJH+Wum1a5HSK96bXcDLQFCQ@mail.gmail.com>
> I think it should be 300x300 due to what is defined in minimum sizes ( http://dev.w3.org/csswg/css-flexbox/#min-size-auto) I was under the impression that the minimum size calculation table you linked to only applied if the flex-basis was `auto`. In this case the flex-basis is `150px` and the grow and shrink properties are both `0`, so I assume that means this flex item's main size is guaranteed to be 150 pixels. On Mon, Feb 23, 2015 at 10:46 AM, Greg Whitworth <gwhit@microsoft.com> wrote: > > Consider the following demo: > > http://codepen.io/anon/pen/myLmYW > > It contains a 300 by 300 pixel image that is a flex-item and its > flex-basis is set to 150px. The question is: what should its height be? > > Naturally, I'd assume the image would resize according to its aspect > ratio, but I can't find anything to indicate that in the flex layout > algorithm. From my (possibly incorrect) reading, the height should remain > at its default 300px value. > > When I go through the steps to calculate the cross size of each flex > line I end up being told that the cross size of the flex line should be the > "largest outer hypothetical cross size". > > When I go to determine the hypothetical cross size of each item, I'm > instructed to "determine the hypothetical cross size of each item by > performing layout with the used main size and the available space, treating > auto as fit-content." > > In that last sentence, its unclear to me if I should take into account > the images intrinsic aspect ratio or not. Is there something in the > definition of "fit-content" that I'm missing? Or could the text be more > clear to handle this case? > > I think it should be 300x300 due to what is defined in minimum sizes ( > http://dev.w3.org/csswg/css-flexbox/#min-size-auto) > > Since you did not set a min-width we end up going down "content size" > which basically asks the content how big it is, in this case 300px. > Then when you are determining the cross axis it states: > > # Determine the hypothetical cross size of each item by performing > layout with the _used main size_ and the available space, treating ‘auto’ > as ‘fit-content’. > > The important part is the used main size, which in this example would be > 300 and since you have flex-shrink and grow set to 0 - it should end up > being 300x300. If you have flex grow it should still retain this aspect > ratio unless you have any stretch properties set. > > Does that make sense? > > Greg >
Received on Monday, 23 February 2015 19:49:01 UTC