W3C home > Mailing lists > Public > www-style@w3.org > February 2015

Re: [css-flexbox] Is intrinsic aspect ratio considered when the flex-basis is definite?

From: Philip Walton <philip@philipwalton.com>
Date: Mon, 23 Feb 2015 11:48:33 -0800
Message-ID: <CAGRhNhVs_UV3f29-_Axu3M-jEfpJH+Wum1a5HSK96bXcDLQFCQ@mail.gmail.com>
To: Greg Whitworth <gwhit@microsoft.com>
Cc: www-style list <www-style@w3.org>
> 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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:01 UTC