This is a rough mockup from my project. The parent has a container query, while the child is supported to be fixed (ocasionally). If parent has container query inline-size, child is no longer fixed to page.
Can this behavour be prevented? I realize if I apply inline-size to child instead of parent, it seems to work, but I am trying to find a solution to have inline-size on parent if possible.
.parent {
position: relative;
height: 150px;
background: #eee;
max-width: 300px;
container: dialog_data / inline-size;
}
.child {
background: red;
height: 100px;
top: auto!important;
position: fixed!important;
z-index: 2147483648;
bottom: 20px!important;
left: 20px!important;
margin: 0!important;
width: 100%;
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
<div class="parent">
<div class="child "></div>
</div>
The behavior has changed and now container no more create a "layout containment"
Related: https://github.com/w3c/csswg-drafts/issues/10544
Like many other properties container is one of those that fixed element cannot escape:
The layout containment box establishes an absolute positioning containing block and a fixed positioning containing block.
Related: Why does applying a CSS-Filter on the parent break the child positioning?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With