How to pin element inside a horizontally scrollable div

If I have a button with position: absolute inside of a div with overflow-x: auto the button will snap to the edge of the container.

However, if the div's content overflows the horizontal width, the button stays pinned to its starting location within the container after scrolling.

It seems absolute ought to fix it to the side, but doesn't seem to do the trick

Is there any way to pin the child content to the right side of a horizontally scrollable div?

Minimal, Complete, Verifiable Example

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

.container {
    width: 20rem;
    border: 1px solid grey;
    padding: 1rem 1rem;
    position: relative;
    overflow-x: auto;
}
.container button {
    position: absolute;
    right: 0;
    top: 0;
}

<!-- language: lang-html -->

<pre class="container">Multi Line Text
Long piece of content that overflows the width of container<button>Copy</button></pre>

<!-- end snippet -->

Position fixed won't work because it's always relative to the page. You want to nest the elements inside another component that has a position relative. The elements inside will be positioned based on this parent.

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

.top-container {
    position: relative;
    width: 20rem;
    border: 1px solid grey;
}

.container {
    padding: 1rem 1rem;
    overflow-x: auto;
    margin: 0;
}
.top-container button {
    position: absolute;
    right: 0;
    top: 0;
}

<!-- language: lang-html -->

<div class="top-container">
  <button>Copy</button>
  <pre class="container">Long piece of content that overflows the width of container</pre>
</div>

<!-- end snippet -->