当内容溢出时动态修改FORM或DIV背景色的实现方案咨询

我有一个表单，出于物理打印的需求，其中某个特定区域的最大高度必须限制为3英寸。在这个区域里，我放了一个没有字符上限限制的textarea让用户输入内容。如果内容太长，就会把这个div里的下一个元素挤到屏幕外（也就是溢出）。当发生溢出时，我希望整个表单（优先选择）或者溢出的div的背景色能改变，以此视觉提示用户内容溢出了。

我没法贴实际代码，但下面是一个示例，展示了我想要实现的效果。我希望能修改<form>、<section id="middle">和/或<div id="overflow" class="static-section">的颜色。

示例代码 #

CSS 样式

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;
}

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>

非常感谢任何相关的帮助。

备注：内容来源于stack exchange，提问作者dDubs