How do I extend div beyond viewport in CSS?

What I'm trying to do is have a div that is directly in the body extend beyond the viewport when I overscroll downwards. Right now, when I scroll down at the bottom of the page, the content kind of "overscrolls" revealing the body's background. I want the div's background to be visible there.

I searched for a solution for hours, but couldn't find anything so I tried setting the margin-bottom to a negative value, but to no avail.

Here's the code with sample text and with a style tag instead of a seperate stylesheet file:

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body{
                background-color: red;
            }
            .content {
                margin: 2% 10%;
                margin-bottom: -1000px;
                padding: 5% 5%;
                background-color: #404040;
                color: lightgrey;
                overflow: visible;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>Content</p>
            <p>spanning</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>many</p>
            <p>lines</p>
        </div>
    </body>
</html>

Solution

This issue turned out to be only present when scrolling with a touchpad or touchscreen on Windows 11 in Firefox version 116.0.2 or possibly earlier versions as well

Edit: it can be turned off in about:config by setting apz.overscroll.enabled to false