[csswg-drafts] [css-flexbox] content size suggestion of natural aspect ratio flex items (#6693)

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

== [css-flexbox] content size suggestion of natural aspect ratio flex items ==
This issue is about the height of the flex item in [this case](https://jsfiddle.net/dgrogan/ug9rsf2a/):

```html
<div style="display: flex; flex-direction: column; width:100px; height: 0px;">
  <img src="300x150.png" style="height: 100px;">
</div>
```

Gecko and Blink both give the flex item height `100px`. I think the _current specs dictate_ height `50px`.

The item has `0` available height and `flex-shrink: 1`. So the min-height of the item will be the item's final size.

I think all of us Gecko and Blink layout engineers agree so far. But we've had disagreement in something about what follows, so I am numbering steps for reference.

1. The min-height is `min(specified size suggestion, content size suggestion)`. specified size suggestion is clearly `100px`, so min-height is `min(100px, content size suggestion)`.

2. Then, [content size suggestion](https://drafts.csswg.org/css-flexbox/#content-size-suggestion) is just the min-content height.

3. min-content height is [defined](https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes) to be the height of [the image in this case](https://jsfiddle.net/9fzsbLr0/):

```html
<div style="height: 0px">
  <img src="300x150.png" style="width: 100px; float: left; min-height: 0px; max-height: none;">
</div>
```

4. `width:100px` is from [flex 9.8.3](https://drafts.csswg.org/css-flexbox/#definite-sizes) saying the "automatic preferred outer cross size of any stretched flex items is the flex container’s inner cross size". The flex container's inner cross size in the original example is `100px`. The flex item in the original example has an "automatic preferred outer cross size".

5. Both engines give that image height `50px`. (`width:100px` in a `300/150` aspect ratio gives height `50px`)

6. So the min-content size of the image in the original example is `50px`. So the final height of the flex item in the original example is `min(100px, 50px)` which is `50px`. Both engines are wrong to give height `100px`.

spec authors @tabatkins @fantasai: Is `50px` wrong? Which step?

aforementioned layout engineers @aethanyc @dholbert @bfgeek @cbiesinger: Is `50px` wrong? Which step?

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


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

Received on Tuesday, 28 September 2021 02:43:40 UTC