Resize Sensor

loosely based on https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js

HTML

<div class="example">
    <div class="sensor">
        <div class="sensor-expand">
            <div class="sensor-expand-child"></div>
        </div>
        <div class="sensor-shrink">
            <div class="sensor-shrink-child"></div>
        </div>
    </div>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus tempor tellus vitae volutpat.</p>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 14px;
}
.example {
    position: relative;
    line-height: 20px;
}
.example:before,
.example:after {
    content: "";
    display: table;
}
button {
    display: inline-block;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    font-size: inherit;
    font-family: inherit;
    line-height: 24px;
    height: 24px;
    line-height: 24px;
    padding: 0 15px;
    margin: 0 5px 0;
    border-radius: 3px;
}

.sensor,
.sensor-expand,
.sensor-shrink {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    z-index: -1;
    visibility: hidden;
}
.sensor-expand-child,
.sensor-shrink-child {
    position: absolute;
    left: 0;
    top: 0;
}
.sensor-shrink-child {
    width: 200%;
    height: 200%;
}

JavaScript

var element = document.querySelector('.example');
var resizeSensor = element.querySelector('.sensor');
var expand = resizeSensor.querySelector('.sensor-expand');
var expandChild = resizeSensor.querySelector('.sensor-expand-child');
var shrink = resizeSensor.querySelector('.sensor-shrink');
var shrinkChild = resizeSensor.querySelector('.sensor-shrink-child');

var lastWidth, lastHeight;

var reset = function() {
  expandChild.style.width = (expand.offsetWidth + 10) + 'px';
  expandChild.style.height = (expand.offsetHeight + 10) + 'px';
  expand.scrollLeft = expand.scrollWidth;
  expand.scrollTop = expand.scrollHeight;
  shrink.scrollLeft = shrink.scrollWidth;
  shrink.scrollTop = shrink.scrollHeight;
  lastWidth = element.offsetWidth;
  lastHeight = element.offsetHeight;
};

reset();

var changed = function() {
  console.log('size changed huhu');
};

expand.addEventListener('scroll', function() {
  if (element.offsetWidth > lastWidth || element.offsetHeight > lastHeight) {
    changed();
  }
  reset();
});

shrink.addEventListener('scroll', function() {
  if (element.offsetWidth < lastWidth || element.offsetHeight < lastHeight) {
    changed();
  }
  reset();
});

var height = 20;
document.querySelector('.plus').addEventListener('click', function() {
  element.style.lineHeight = (height += 1) + 'px';
});
document.querySelector('.minus').addEventListener('click', function() {
  element.style.lineHeight = (height -= 1) + 'px';
});