<h1>Resize the container to adjust the overflow</h1>

<div class="text-box-container">
  <div class="text-box">
    <div id="text" class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ipsum eget arcu mollis accumsan. Ut convallis pretium ante, aliquet accumsan dui aliquet mattis. Sed et pretium nulla. Sed arcu dui, fringilla ut faucibus ut, suscipit sed nisl. Phasellus ullamcorper, ante sit amet cursus blandit.</p><p>Donec sed mi eu turpis accumsan tincidunt nec cursus elit. Fusce euismod vestibulum porttitor. Phasellus scelerisque tempus eros eget tristique. Fusce ut aliquam mauris. Vivamus consectetur congue tortor eu dictum. Donec nec tristique turpis, id mattis magna. Donec malesuada purus nec lectus suscipit, ultricies lobortis nulla <strong>gravida</strong>.</p>
    </div>
  </div>
</div>
.text-box {
  width: 100%;
  max-height: 205pt;
  overflow: hidden;
  width: 100%;
}

.text-box-container {
  animation: stretch 10s 2;
  height: auto;
  background-color: white;
  width: 10em;
  padding: 1.5em;
  border-radius: 0.2em;
  -webkit-box-shadow: 0px 14px 23px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 14px 23px 0px rgba(0, 0, 0, 0.3);
  resize: horizontal;
  overflow: auto;
}

/* OVERFLOW STYLES */

.overflow {
  border: 1px dashed red;
  position: relative; }
.overflow h2, .overflow p, .overflow h6, .overflow li { color: red !important; }
.overflow::before {
  content: '+';
  position: absolute;
  z-index: 5;
  top: 5px;
  right: 5px;
  height: 15px;
  width: 15px;
  border: 1px solid red;
  color: red;
  padding: 2px 2px 2px 3px;
  box-sizing: border-box;
  font-size: 13px;
  text-align: center;
  line-height: 8px;
  background-color: white;
  text-align: center; }
.overflow:hover:before {
  background-color: red;
  color: white; }
.overflow:after {
  display: none; }
.overflow:hover:after {
  display: block;
  content: 'There is overset content in this column. Please remove it';
  position: absolute;
  top: 25px;
  right: 5px;
  background-color: black;
  color: white;
  border-radius: 2px;
  padding: 5px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1em;
  text-align: right;
  width: 15em;
}

/* NON-ESSENTIAL STYLES */

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Open Sans', open sans, helvetica, sans-serif;
  font-weight: 400;
  background-color: #58cb58;
}

body.overflow-true { 
  background-color: #D13D3D; 
}

p { 
  margin-top: 0; 
  font-size: 10pt;
  line-height: 1.5em;
  font-family: 'Open Sans';
}

p:last-child { 
  margin-bottom: 0; 
}

h1 {
  color: white;
  font-size: 1.5em;
  font-weight: 300;
  margin-bottom: 2em;
  opacity: 0;
  animation: appear 1s 1;
  animation-delay: 20s;
  animation-fill-mode: forwards;
}

@keyframes stretch {
  0%, 100% {
    width: 30%
  }
  15%, 85% {
    width: 30%;
  }
  40%, 60% {
    width: 60%
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
function loop() {
  checkHeight(document.getElementsByClassName('text'));
  
  // Add any other text boxes you want to check the overflows on with the
  // eg. checkHeight(document.getElementsByClassName('CLASS NAME'));
} setInterval(loop, 500);

function checkHeight(element) {
  for (i = 0 ; i < element.length ; i++ ) {
    var currentElement = element[i];
    var height         = currentElement.offsetHeight;
    var parent         = currentElement.parentNode;
    var parentHeight   = parent.offsetHeight;

    if (height > parentHeight) {
      parent.classList.add('overflow');
    } else {
      parent.classList.remove('overflow');
    }

    if ((currentElement).parentNode.classList.contains('overflow')) {
      document.body.classList.add('overflow-true');
    } else {
      document.body.classList.remove('overflow-true'); 
    }

    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.