css-element-queries-sensor-fix

by lxjwlt

HTML

<script src="https://unpkg.com/[email protected]/src/ResizeSensor.js"></script>
<div class="wrap">
  <div id="box"></div>
</div>
<div id="text"></div>

CSS

.wrap {
  height:20px;
  resize: both;
  overflow: scroll;
}

/* fix */
.resize-sensor {
  top: -10px!important;
  left: -10px!important;
}

JavaScript

var boxEl = document.getElementById('box');
var textEl = document.getElementById('text');

new ResizeSensor(boxEl, function () {
	textEl.innerHTML = boxEl.offsetWidth; 
});

textEl.innerHTML = boxEl.offsetWidth;