Scroll Event Passthrough on Fixed Elements in Scrollable Container

Question

I have a scrollable div with a fixed element inside that contains elements that need to be clickable/interactive (which rules out pointer-events: none). When I attempt to scroll through that div while hovering over the fixed element, nothing happens. However, if I'm scrolling the window (i.e., there are no containers with scrollable overflows), I can scroll through fixed objects with no issues at all.

It looks like a few others have run into similar issues:

• This post, but they found no solution.
• This much older post, but the solutions are not in pure CSS; I'd like to be able to very simply keep the element fixed rather than relying on a scroll event to adjust its position, if such a solution is possible.
• Many others suggest setting pointer-events: none on the fixed div, but that div again needs to contain interactive content, which makes this a no go.

Given this, is it possible to allow scroll events to pass through fixed divs in containers with scrollable overflow? Many thanks!

Here's an example demonstrating the issue (also available on Codepen):

#root {
  width: 650px;
}

#examples {
  position: relative;
}

.container {
  width: 250px;
  height: 100px;
  background: #eee;
  
  position: absolute;
  top: 0;
}

.container.overflow-scroll {
  overflow: scroll;
  left: 350px;
}

.scroll-content {
  background: linear-gradient(red, orange);
  width: 200px; height: 1000px;
}

.fixed {
  position: fixed;
  top: 100px; left: 50px;
  width: 100px; height: 80px;
  background: blue;
}

.fixed p {
  color: white;
  margin: 12px;
  font-size: 12px;
}

.container.overflow-scroll .fixed {
  left: 400px;
}

* {
  font-family: sans-serif;
}

.code {
  font-family: monospace;
}

<div id="root">

<p>Below are two scrollable containers. On the left, I can hover over the fixed blue square and still be able to scroll. However, using <span class="code">overflow: scroll</span> as in the right, makes scrolling no longer work. Scroll events on the container also don't fire.</p>

<div id="examples">
  <div class="container">
    <div class="scroll-content"></div>
    <div class="fixed"><p>Scrolling on me works.</p></div>
  </div>
  <div class="container overflow-scroll">
    <div class="scroll-content"></div>
    <div class="fixed"><p>Scrolling on me won't scroll my container!</p></div>
  </div>
</div>
  
</div>