Readable Email

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

# Philip Walton (a year ago)

Consider the following demo: 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 [http://dev.w3.org/csswg/css-flexbox-1/#algo-cross-line](http://dev.w3.org/csswg/css-flexbox-1/#algo-cross-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 [http://dev.w3.org/csswg/css-flexbox-1/#algo-cross-item](http://dev.w3.org/csswg/css-flexbox-1/#algo-cross-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?

Contact us to advertise here
# Greg Whitworth (a year ago)

Consider the following demo: 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 (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

# Philip Walton (a year ago)

I think it should be 300x300 due to what is defined in minimum sizes ( 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:

# Greg Whitworth (a year ago)

OOOOOH, you better not top post or Tab will give you a nasty-gram! ;)

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.

No because each algo has you clamp to the min and max constraint. You start off with the flex basis but in multiple places the spec says to double check and clamp it, for example under flex base size determination:

# The hypothetical main size is the item’s flex base size clamped according to its min and max main size properties.

The main size properties are width and height respectively, which include their min/max counterparts respectively depending on the direction of your flex container. The reason for this is because if flex-basis was treated the same as width as you state, the flex shortand defaults to 0% = 0px which would have results that people would not want (not being able to see the content).

And since min-width and max-width are left empty they use their default which is auto, and the beginning of the table states:

# To provide a more reasonable default minimum size for flex items, this specification introduces a new ‘auto’ value as the initial value of the ‘min-width’ and ‘min-height’ properties defined in CSS 2.1.

So if you don't provide a min/max width in your row flex container we have to go through this step which will result in us doing one of the 3 options (clamped size, transferred size, content size).

Interestingly though, this is something that Daniel and I were just discussing that we should explicitly list min-width, min-height, max-width, max-height as main-size properties as this is the only thing that connects all of the dots together in the spec since so much of it depends on each other.

Does that make sense?

Greg

# Daniel Holbert (a year ago)

On 02/23/2015 10:46 AM, Greg Whitworth wrote:

I think it should be 300x300 due to what is defined in minimum sizes (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.

Huh -- this doesn't match what Firefox does in this case, but it looks like you're right according to the current spec.

Until August 2014, the "min-width:auto" language in the spec explicitly said to ignore the min-content size for flex items that have an intrinsic aspect ratio. This is what Firefox does, since I implemented our most recent "min-width:auto" incarnation in July 2014; so we size the image to be 150px wide.

I saw the August rewrite of this section go by, but I was under the impression that it the rewrite was just making clarifications & better handling edge cases. But I'm now noticing that it actually changed this important point as well - it changed to now consider the min-content size, when resolving "min-width:auto" on flex items that have intrinsic aspect ratios.

I wish I'd noticed that at the time... I don't think I agree with that change, and I'm curious if it was intentional & why it was changed.

I picked up a different thread to ask about that change: lists.w3.org/Archives/Public/www-style/2015Feb/0485.html

~

# Philip Walton (a year ago)

On Mon, Feb 23, 2015 at 2:44 PM, Greg Whitworth gwhit@microsoft.com wrote:

OOOOOH, you better not top post or Tab will give you a nasty-gram! ;)

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.

No because each algo has you clamp to the min and max constraint. You start off with the flex basis but in multiple places the spec says to double check and clamp it, for example under flex base size determination:

    # The hypothetical main size is the item’s flex base size clamped

according to its min and max main size properties.

The main size properties are width and height respectively, which include their min/max counterparts respectively depending on the direction of your flex container. The reason for this is because if flex-basis was treated the same as width as you state, the flex shortand defaults to 0% = 0px which would have results that people would not want (not being able to see the content).

I see, I'd remembered reading something Tab wrote on another thread and incorrectly came to that conclusion. He said: "If they have a definite flex-basis, their widths are totally ignored", but I guess in that quote he's referring to the main-size properties and not the min/max-main-size properties.

It still seems counter-intuitive to me that a definite flex-basis paired with a zero value for the flex-grow/shrink properties would ever be anything other than that flex-basis value. All of the shorthands either have a flex-grow/shrink value or a flex-basis of auto, so the result of "not being able to see the content" is unlikely to happen by accident.

Want more features?

Request early access to our private beta of readable email premium.