Thanks @Hilory - this post really helped me. There was another post that came in but for some reason appears to have been deleted that also helped (sorry I didn't catch the name to give credit). Since I decide that I'd rather have the entire form's background color changed and also needed to monitor any changes that may affect the overflowing, I updated Hilory's and the other poster's together to come up with the following:
<script>
const overflowContainer = document.getElementById('overflow');
const entryForm = document.getElementById('entry');
function checkOverflow() {
const isOverflowing = overflowContainer.scrollHeight > overflowContainer.clientHeight;
entryForm.classList.toggle('overflowing', isOverflowing);
}
// Initial check
checkOverflow();
// Add event listeners for dynamic content changes
entryForm.addEventListener('input', checkOverflow);
window.addEventListener('resize', checkOverflow); //checks when text-area is resized.
window.addEventListener('change', checkOverflow); //need this bc of the font-resizing functionality on the page.
</script>
Note that using the above also requires the following CSS class:
.overflowing {
background-color: #F77 !important; // Redish background for overflow
}