[css-flexbox] specify that elements that elements that are supposed to fill their parents actually fill their parents

[greggman]

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

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

and CSS like this

#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

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

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

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

Context: I tried to write a test for ResizeObserver devicePixelContentBox. 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?

[greggman]

@chrishtr put it this way:

"Perhaps we could add normative spec text for it that says "browsers should make pixels add" or similar. Can you file an issue at the CSSWG about this?