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: Greg Whitworth <gwhit@microsoft.com>
Date: Mon, 23 Feb 2015 18:46:49 +0000
To: Philip Walton <philip@philipwalton.com>, www-style list <www-style@w3.org>
Message-ID: <BN3PR0301MB0868B08DAF924CC1D0D336B3A4290@BN3PR0301MB0868.namprd03.prod.outlook.com>
> 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?

Received on Monday, 23 February 2015 18:47:19 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:51 UTC