1 reply

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;

position: fixed;

doesn't contribute to the height of the parent. Adding

overflow: scroll;

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;

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?

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>

position: fixed;

position: fixed;

doesn't contribute to the height of the parent. Adding

overflow: scroll;

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;

contain: layout;

Contain and scrollports

Contain and scrollports

Similar Threads

Similar Threads

Similar Threads