[csswg-drafts] [css-flexbox] specify that elements that elements that are supposed to fill their parents actually fill their parents (#7506)

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

== [css-flexbox] specify that elements that elements that are supposed to fill their parents actually fill their parents ==
Sorry I'm not a CSS expert. I hope css-flexbox is the correct place. I was told to file this by @chrishtr

Issue: Create some html like this

```html
<div id="a"></div>
<div id="b">
  <div id="c"></div>
  <div id="d"></div>
</div>
```

and CSS like this

```css
#a, #b {
  width: 99px;
  height: 15px;
}
#b { display: flex; }
#c, #d {
  flex: 1 1 auto;
  height: 15px;
}


#a { background-color: #79fb9a; }
#c { background-color: #ff4949; }
#d { background-color: #2d72d9; }
body { background: #000 }
```

[live](https://jsgist.org/?src=71c24392aa49a7995c492f68116dcc8c)

Most users would expect a result like this (the red and blue parts (c & d) fill their parent (b))

![goal](https://user-images.githubusercontent.com/234804/177024230-a798e1cb-3bce-48f3-bad1-237c06a50681.png)

And my understanding is all current browsers want that result. 

BUT! I'm told that the spec doesn't actually **require** that result and that all of these results are just as valid



![l-lr](https://user-images.githubusercontent.com/234804/177024268-0a0925d5-89da-4cb7-8863-be79f7c87383.png)

![l-extra](https://user-images.githubusercontent.com/234804/177024270-7ec9af1c-825d-4853-be44-2164f9d0cd1f.png)

![l-lit](https://user-images.githubusercontent.com/234804/177024274-7f38b57e-97a7-4493-9a8f-1c1ae9dc342e.png)

![l-rand](https://user-images.githubusercontent.com/234804/177024299-882d7219-2aee-4915-9552-12b539ba6baa.png)

![l-squish](https://user-images.githubusercontent.com/234804/177024315-5b90fad0-257d-43e1-980f-94d092ed5d00.png)

![l-gap](https://user-images.githubusercontent.com/234804/177024365-bcdeddd5-7efd-44a3-9c3d-c79291a57a3e.png)

![l-leadgap](https://user-images.githubusercontent.com/234804/177024367-65e3eb59-aa18-4bce-a76e-ad6c8c7708ed.png)

Can the specfication be updated so that only the first result is valid?

Context: [I tried to write a test for `ResizeObserver` `devicePixelContentBox`](https://github.com/web-platform-tests/wpt/pull/34569). My test was effectively, create `b`, `c`, `d` above. Measure the `devicePixelContentBox` of `b`, `c`, `d` then validate that size of c + d = sizeof b. I was told that is not actually specified and so can't be tested currently. When the browser snaps CSS pixels to device pixels it is not required to respect the (arguably intended) layout.

It seems like all browsers would like to guarantee this layout so maybe add something to spec for it?

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


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

Received on Friday, 15 July 2022 23:12:21 UTC