Re: [csswg-drafts] [css-flexbox] Change content-size suggestion to min-intrinsic instead of min-content? (#6794)

> OK, so in that case, for replaced elements specifically, should we change Flexbox to align with grid (transferred size overrides intrinsic size whenever it exists, rather than taking the minimum as in the Flexbox spec)?

I believe so - we've accidentally broken this area before and lots of sites rely on the current behaviour. (Lots of frameworks/sites place "flex:1" on elements universally - and its super common for "height:100%" to be on replaced elements). Web developers expect the aspect-ratio to be preserved for these cases.

One thing I'd like to start the discussion with is what authors/web-developers expect in particular case. Likely folks like @una @jensimmons @bramus @argyleink etc can chime in here.

Do web-developers expect the aspect-ratio to be preserved in this case, or do they expect it lose the aspect-ratio and shrink?

This will help frame the rest of the discussion.

No matter what we resolve on everyone gets at least one case subtly wrong. For completeness I put together 
I've collected some test cases here:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10592 [1]

So we can discuss with examples.

Ian


[1]
```html
<!DOCTYPE html>
<style>
.flex {
  display: inline-flex;
  margin: 50px;
  border: solid 3px;
}
.item {
  aspect-ratio: 1;
  flex: 1;
  background: lime;
  font-size: 60px;
}
</style>
<div class="flex" style="flex-direction: column; width: 100px; height: 50px;">
  <div class="item" style="width: 100%;">
    text
  </div>
</div>
<div class="flex" style="flex-direction: column; width: 100px; height: 50px;">
  <div class="item" style="align-self: stretch;">
    text
  </div>
</div>
<div class="flex" style="flex-direction: column; width: 100px; height: 50px;">
  <div class="item" style="width: 100%;">
    text<br>text
  </div>
</div>
<div class="flex" style="flex-direction: column; width: 100px; height: 50px;">
  <div class="item" style="align-self: stretch;">
    text<br>text
  </div>
</div>
<br>
<div class="flex" style="flex-direction: row; width: 50px; height: 100px;">
  <div class="item" style="height: 100%;">
    tex
  </div>
</div>
<div class="flex" style="flex-direction: row; width: 50px; height: 100px;">
  <div class="item" style="align-self: stretch;">
    tex
  </div>
</div>
<div class="flex" style="flex-direction: row; width: 50px; height: 100px;">
  <div class="item" style="height: 100%;">
    texty
  </div>
</div>
<div class="flex" style="flex-direction: row; width: 50px; height: 100px;">
  <div class="item" style="align-self: stretch;">
    texty
  </div>
</div>
```

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


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

Received on Friday, 19 August 2022 19:04:20 UTC