Re: [csswg-drafts] [css-contain-1] do we need layout containment in a single dimension to enable container queries?

Interesting example.

The height of `.inner` depends on the height of the content area of `.parent` , which is fixed at 100px.
So the height of inner is also 100px, regardless of what happens to its padding-top.
The height of `child` is 100% of the content height of `.inner`, so 100px again.

The fact that `padding-top` changes when the non-contained x-axis changes means that the position of `child` will change depending on its width, but it's height will not.

`contain:size-y` means that size changes changes within `.child` that would affect its height don't, so the height of `inner` or up don't change because of that.

So we don't have a loop here: yes, width changes in .child do cause vertical layout changes in ancestors, but those don't affect their content height, and there's no impact on `.child`'s content height…

However, if you add `box-sizing: border-box` on `.inner`, then there is an effect on `.inner`'s content height, and we do have a problem. Damn.

Unlike scrollbars, I don't see any simple way to fix that one.

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

Received on Monday, 9 April 2018 13:54:40 UTC