Open mstensho opened 5 years ago
Interestingly enough, the answer varies: for boxes that establish an independent containing block, CSS2 says they fit in the remaining space after the float; for non-replaced blocks, the float is ignored. Probably fit-content
and the stretch
keyword should match this behavior, since it was their intention to provide a switch between the shrink-to-fit sizing and fill-available sizing behaviors in CSS2.
There is a 17-star issue in Chrome that relies on the CSSWG to resolve the specification as soon as possible. https://issues.chromium.org/issues/41253915
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing https://drafts.csswg.org/css-sizing-3/#auto-box-sizes
The spec currently doesn't provide a size keyword to achieve this effect, but there used to be one named "fill-available", then renamed to "fill", "stretch" and/or "stretch-fit".
The behavior is partially defined, though, in level 3. "The size a box would take if its outer size filled the available space in the given axis; in other words, the stretch fit into the available space, if that is definite."
Furthermore, the spec already refers to stretch-fit sizing as part of resolving fit-content, so my question is: How is stretch-fitting in the inline dimension affected by adjacent floats?
Should the yellow box fit to the right of the yellow box, or go below, and use the entire width of its containing block?