title: How to change a div's height (500px) to auto after a paragraph inside it reaches 500px in height?
body: <p>I want a to have a text box where you can write in, and currently I am using a div with a background and a paragraph (<p>) inside the div. I want the div to cover the page except for a margin, but then if you go past the limit of 500px, the div's height in the CSS changes to auto so that there is still a background as you go down the page. </p>
  
  <p>The code below is not the full version, I removed what was unnecessary for simplicity's sake.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Body Preferneces */
  
  body {
    background-color: #00C5CD;
    font-size: 25px;
  }
  
  
  /* Paragraph Text Preferences */
  
  p {
    font-size: 25pt;
    color: #000;
  }
  
  #text {
    background-color: #fff;
    border: none;
    text-align: left;
    display: block;
    font-size: 16px;
    width: auto;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="CSS.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="text"&gt;
      &lt;div id="identifier"&gt;
        &lt;p contenteditable="true"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>