JSFiddle - React, Tailwind, and code Playground

by basickarl

HTML

<div style="float:right;">
  <div id="z">
    <div id="txt">
     345345345345345345345345345345345
    </div>
  </div>
</div>

CSS

div#z {
  position: relative;
  background: red;
  width: 50px;
  height: 50px;
  overflow: auto;
}

div#txt {
  background: lightblue;
  float: right;
}

JavaScript

console.log(checkOverflow(document.getElementById('z')));

function checkOverflow(el) {

  var curOverflow = el.style.overflow;

  if (!curOverflow || curOverflow === 'visible')
    el.style.overflow = 'hidden';

  var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

  el.style.overflow = curOverflow;

  return isOverflowing;
};