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>
Like many other properties
container
is one of those that fixed element cannot escape:Related: Why does applying a CSS-Filter on the parent break the child positioning?