Re: [csswg-drafts] [css-contain] Can we allow absolutely positioned elements to escape a container? (#10102)

That doesn't work.

When you add `container-type: inline-size` you make the element a containing block according to https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block.

According to https://developer.mozilla.org/en-US/docs/Web/CSS/position, any element with `position: absolute` uses the bounds of the containing block it is a child of.

**If you change this, you need to remove item 4 from the specification** described at https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

Identifying the containing block
The process for identifying the containing block depends entirely on the value of the element's position property:

1. If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
3. If the position property is fixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media).
4. **If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following**:
A filter, backdrop-filter, transform, or perspective value other than none.
A contain value of layout, paint, strict or content (e.g. contain: paint;).
**A container-type value other than normal.**
A will-change value containing a property for which a non-initial value would form a containing block (e.g. filter or transform).
A content-visibility value of auto.

You can also _mitigate_ this problem by using `position: relative` in the element that is to be the containing block.

It broke in Chrome with the latest release - https://issues.chromium.org/issues/369781727

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


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

Received on Thursday, 26 September 2024 16:56:01 UTC