Re: [csswg-drafts] [flex] Sizing images with intrisic aspect-ratio: ¿harmonize with grids?

> Handle 'align-content: stretch'. If the flex container has a definite cross size, align-content is stretch, and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size, increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container’s inner cross size. 

By that logic, wouldn't you always output the image at 32x32 at minimum? align-content:stretch does not allow to shrink, and if you do not consider the flex as imposing its height on the image, the image would get 32x32 which it doesn't in any browser. 

In actuality, this part of the algorithm does not even trigger here because the flex has only one line, and that line therefore takes its cross size from the element directly (see step 8).

The actual behavior we are discussing here is described further in the algorithm:

> 11: https://drafts.csswg.org/css-flexbox/#algo-stretch
> Determine the used cross size of each flex item. If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s min and max cross size properties. Otherwise, the used cross size is the item’s hypothetical cross size. 
> 
> If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
> 
> Note that this step does not affect the main size of the flex item, even if it has an intrinsic aspect ratio. 

The last sentence seems to give Chrome the edge here, though. By that line, we should actually always have a main size of 32px irrespective of whether we shrinked-or-grew the image. So, the algorithm explicitly does not try to preserve the aspect-ratio. I guess the reasoning is that otherwise your line could overflow even if you had set the flex to wrap. That is very unfortunate though, because now you cannot preserve the aspect ratio in a flex.

@fantasai Did I miss something here? Last time you had a look at this, you felt the first rendering was the right one, which was Edge's behavior. Now based on the actual spec text I am not sure anymore.

-- 
GitHub Notification of comment by FremyCompany
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1112#issuecomment-289617043 using your GitHub account

Received on Monday, 27 March 2017 23:32:46 UTC