[csswg-drafts] [css-contain-2] Size containment is under-specified if used inside of a BFC. (and maybe elsewhere) (#13737)

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

== [css-contain-2] Size containment is under-specified if used inside of a BFC. (and maybe elsewhere) ==
See https://drafts.csswg.org/css-contain-2/#containment-size

Size containment is specified to run in 2 phases:
1. Lay the element out as normal, but size it as if it were empty.
2. Lay out its content into the fixed-size box you just made.

This does not state how the children of the size-contained element participate in the formatting context that the size-contained element exists in. (Since it does not establish one itself)
A literal reading of the spec suggests size containment has no effect on margin collapsing or float intrusions, for instance. The top margin of the first child of the size-contained element should happily collapse with any margins right above the size-contained element. This does not happen in implementations, so it seems to me like all special layout state from the outside formatting context is lost. (whatever that means)

Also, one would assume that when sizing a block-level element as if it were empty, it would still span the entire inline direction of the BFC that it participates in. Usually, this would mean that a floating element right before the block intrudes into it and that content within the block must be laid out around that float.
This does not happen in implementations. They just shorten the size-contained element so that it fits next to the floated one.

Here's an example of the margin collapsing thing:
```html
<!DOCTYPE html>
<p>
    Paragraph 1
</p>
<div style="container-type: size">
    <p>
        Paragraph 2
    </p>
</div>
```

Here's an example of the float thing:
```html
<!DOCTYPE html>
<style>
 .contained {
  container-type: size;
  background-color: blue;
  min-height: 10em;
 }
 .float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: rgba(0,255,0,.5);
 }
</style>
<div class="float"></div>
<div class="contained">
 <p>
  This is some text inside the size-contained element.
 </p>
</div>
```
The difference can be seen by just removing the size containment.

This applies to inline-size containment also and the behavior seems to be interoperable across Firefox, Safari and Chrome.

TL;DR:
1. What external formatting context state is discarded when starting layout for the children of a size-contained element?
2. What special considerations need to be taken during the layout of a size-contained element?

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


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

Received on Friday, 27 March 2026 22:17:39 UTC