Kevin Powell - Community•3mo ago

Contain and scrollports

<div class="scrollport container">
  I'm just a scrolling container.
  <div class="fixed-position">I'm completely off the page and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="contains-layout container">
  I'm just a layout container.
  <div class="fixed-position">I'm visible outside my parent and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="scrollport contains-layout container">
  I'm a layout container with <code>overflow-y: auto.</code>
  <div class="fixed-position">I'm visible inside my parent and contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<style>
  .scrollport {
  overflow-y: auto;
}
.fixed-position {
  position: fixed;
  top: 100%;
}
.contains-layout {
  contain: layout;
}
div {
  outline: 1px solid red;
  margin-bottom: 2rem;
}
.container {
  height: 5rem;
}
</style>

<div class="scrollport container">
  I'm just a scrolling container.
  <div class="fixed-position">I'm completely off the page and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="contains-layout container">
  I'm just a layout container.
  <div class="fixed-position">I'm visible outside my parent and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<div class="scrollport contains-layout container">
  I'm a layout container with <code>overflow-y: auto.</code>
  <div class="fixed-position">I'm visible inside my parent and contribute to the scrollable size of my parent. My margin doesn't do anything.</div>
</div>
<style>
  .scrollport {
  overflow-y: auto;
}
.fixed-position {
  position: fixed;
  top: 100%;
}
.contains-layout {
  contain: layout;
}
div {
  outline: 1px solid red;
  margin-bottom: 2rem;
}
.container {
  height: 5rem;
}
</style>

I'm completely baffled by the third container's behavior. Both of these rules apparently create a Block Formatting Context, and yet they work differently. Looking at the MDN page for contain, setting the rule to paint or layout cuts off the overflowing content, since position: fixed; doesn't contribute to the height of the parent. Adding overflow: scroll; then adds the height of the child to the height of the parent for the height of the scrollport, but leaves the height of the parent as just the parent's non-fixed contents. However, without the contain: layout;, the child doesn't contribute to the scrollport, and jumps out of the scrollport without contributing to it. It definitely feels like there should be a way for the two rules to coexist, such that the child is outside the scrollport and doesn't contribute to it while allowing the parent to have its own scrollable content. Does anyone know how that may be possible?

1 Reply

clevermissfox•3mo ago

Following as I’m very unsure on how to work with the contain property and its values

Gaming

Programming

Contain and scrollports