Re: [csswg-drafts] [css-flexbox] When omitted from the flex shorthand the flex-basis value is... (#5742)

Here's a concrete example of where a browser implementing the spec might present a webcompat issue:
https://bug1368592.bmoattachments.org/attachment.cgi?id=9329106

```html
<style>
  .c {
    display: inline-flex;
    flex-direction: column;
    width: 100px;
    min-height: 100px;
    /* important: height is unspecified, which gives special significance
       to 0% height values on our children (e.g. implicit flex-basis:0%) */
    border: 1px solid black;
  }
  .c > * {
    min-height: 5px;
    background: orange;
  }
  .flex0 { flex: 0; }
  .flex0_0 { flex: 0 0; /* note: 2nd unitless-0 just parses as flex-shrink */ }
  .flex0_0pct { flex: 0 0%; }
  .flex0_0px { flex: 0 0px; }
  .flex0_0_0 { flex: 0 0 0; }
</style>
<div class="c"><div class="flex0">flex:0</div></div>
<div class="c"><div class="flex0_0">flex:0 0</div></div>
<div class="c"><div class="flex0_0pct">flex:0 0%</div></div>
<div class="c"><div class="flex0_0px">flex:0 0px</div></div>
<div class="c"><div class="flex0_0_0">flex:0 0 0</div></div>
```

Here's a screenshot showing how that testcase renders in current WebKit / Blink / Gecko:
![image](https://user-images.githubusercontent.com/426803/232870492-86e1bf36-3b03-4336-acdf-5f4047d3522e.png)


In the first two boxes in the testcase, the orange background (the flex item) renders as tall as its text, by virtue of the fact that browsers are interpreting the `flex` expression as implying `flex-basis:0%`, and browsers are then resolving the 0% to `content` due to the indefinite size of the flex container.

If we implement the spec change and use unitless `0` (i.e. `0px`) instead, then browsers would render the first two boxes the same way that they render the last two boxes, with a collapsed flex item height. This may cause webcompat issues, particularly in cases where the flex item has `overflow:hidden|scroll|auto` and collapses away without overflow being visible.

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


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

Received on Tuesday, 18 April 2023 18:38:50 UTC