Why does container-type: inline-size seem to mess with stacking / overflow rules?

Question

Using container-type: inline-size seems to mess with stacking rules and overflow. I'm trying to understand why that is, and if there are any ways to work around what's seemingly another limitation.

.container {
  height: 200px;
  width: 100%;
  background-color: gray;
}

.overflowing {
  margin: 2rem;
  width: 80%;
  background-color: blue;
}

.following {
  container-type: inline-size; /* comment this line out and text starts overflowing */
  width: 100%;
  height: 300px;
  background-color:red;
}

<div class="container">
  <div class="overflowing">
    <p>
    Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah...
    </p>
  </div>
</div>
<div class="following">

</div>

Result without container-type: inline-size applied to the "following" container:

Result with container-type: inline-size applied to the "following" container:

As can be seen in the images, the following section seems to cover up the overflowing text...exactly why is that?

Answer 1

Do'h...

It's because container-type is a CSS property that forms a new stacking context.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

Setting position: relative and z-index on container can do the trick...but this probably won't scale very well in enterprise contexts...

.container {
  height: 200px;
  width: 100%;
  background-color: gray;
  overflow: visible;
  position: relative;
  container-type: inline-size;
  z-index: 1;
}

.overflowing {
  margin: 2rem;
  width: 80%;
  background-color: blue;
}

.following {
  width: 100%;
  height: 300px;
  background-color:red;
  container-type: inline-size;
}

<div class="container">
  <div class="overflowing">
    <p>
    Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah... Ipsum lorem blah blah...
    </p>
  </div>
</div>
<div class="following">

</div>