Change background color when Overflow occurs

I have a page that contains a static/max- height div. My page’s second section’s (id =”middle”) div contains a textarea fields for users to provide a response and the entire div is limited to a height of 3 inches (due to this form being printed on 8.5″x11″ paper). I’d like either the entire page’s or this specific div’s background color to change if what has been entered in to the textarea makes the content of this div overflow.

Is there a way, either via JS or CSS, that I can change the background-color of this div to visually indicate when the contents have overflowed?

Considering I cannot provide my exact code, here is an example that will hopefully assist anyone reviewing my inquiry:

CSS

<style>
    div {
        border: 1px solid #CCC;
        background-color: #FFF;
        margin-bottom: 1rem;
        padding: 1rem;
        width: 8.5in;
        max-height: 7in;
    }

    .static-section {
        display: grid;
        overflow: hidden;
        max-height: 3in;
        width: 7.5in;

        * {
            margin-top: .5rem;
            margin-bottom: .5rem;
            padding: .5rem;
        }
    }

    textarea {
        field-sizing: content;
    }
</style>

HTML:

<form id="entry">
    <section id="top">
        <h1>HEADER</h1>
    </section>

    <section id="middle">
        <div id="overflow" class="static-section">
            <label>This section is locked at a max 3 inches. I want the background color to be red if the anything makes this section overflow.</label>
            <textarea placeholder="type in this section until the following paragraph starts to go off the screen. this is when I want the background color to change."></textarea>
            <P>When this information starts to go off the screen (i.e., enabling overflow - which the scrollbars are being hidden by the static-section class), I want the background color of this div to change. This will provide a visual indication that the provided response is too long.</P>
        </div>
    </section>

    <section id="footer">
        <h1>FOOTER</h1>
    </section>
</form>

If possible, I’d really like the entire form (id=”entry”) have it’s background color be updated (to light red – from white). If that is not possible, I’d like the overflowing section’s (id=”middle”) background to change color when overflow occurs.