[csswg-drafts] [css-flexbox] do aspect-ratio items need to account for both axes when "siz[ing] the item into the available space"? (#5405)

davidsgrogan has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox] do aspect-ratio items need to account for both axes when "siz[ing] the item into the available space"? ==
```html
<div style="display: flex; width: 400px; height: 30px;">
  <img src="https://placekitten.com/100/100">
</div>
```
https://jsfiddle.net/dgrogan/j1p5cn34/

What is the flex base size of this image? Blink says 100px and Firefox seems to agree. I heard that EdgeHTML said 30px.

The controlling part of the spec, https://drafts.csswg.org/css-flexbox/#algo-main-item part E, says "size the item into the available space... flex base size is the item’s resulting main size."

What, precisely, does "size the item into the available space" mean? In this case, where the item has an aspect ratio, EdgeHTML checked the available space in both cross axes, and shrunk the main size if there was insufficient cross axis space for the image's natural height. Blink only checks the available size in the main axis.

My intuition is that developers would rather keep the aspect ratio in this case, so we should switch to EdgeHTML behavior, and the final size of the image above should be 30x30, not 100x30.

The motivating bug is https://crbug.com/697252.

@cbiesinger @dholbert 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5405 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 6 August 2020 20:54:25 UTC