JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div  id="fixed">
    <div class="larger">Haha, I overflow</div>
</div>

CSS

[contenteditable=true] {
margin:20px;   
overflow:hidden;    
}

#fixed {
 width: 200px;
height: 100px;  
border:blue 1px dashed;    
}


.larger {
 width:300px;
height:50px;
 border:red 1px solid;   
}

.invalid {
 -moz-box-shadow:     inset 0px 0px 10px 0px #900 !important;
  -webkit-box-shadow: inset 0px 0px 10px 0px #900 !important;
  box-shadow:         inset 0px 0px 10px 0px #900 !important;   
}

JavaScript

$(function(){
   var f = document.getElementById("fixed");
 var contentHeight = f.scrollHeight;
    var declaredHeight = $(f).height();    
    
 var contentWidth = f.scrollWidth;
    var declaredWidth = $(f).width();    
    if (contentHeight > declaredHeight){
     console.log("invalid height");        
    }
        if (contentWidth> declaredWidth ){
     console.log("invalid width");        
    }
});