CSS container inline-size and fixed child

2k Views Asked by At

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>

1

There are 1 best solutions below

0
On

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?