<aside>
  <button id="start">start</button>
  <button id="reset">reset</button>
  <label><input id="size" type="checkbox" /> set size containment</label>
  <br /><br />
  <button id="resize">resize container</button>
</aside>

<main>
  <section></section>
</main>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html {
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  overflow: hidden;
}
body {
  align-items: center;
  background-color: #1d1e22;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

aside {
  left: 0;
  margin: 20px;
  position: fixed;
  top: 50px;
}

main {
  background-color: #333;
  border: 3px solid rebeccapurple;
}

section {
  border: 2px solid red;
  height: 100px;
  margin: 10px;
  width: 100px;
}

main.size {
  contain: size;
  height: 200px;
  width: 200px;
}
main.resize {
  height: 200px;
  width: 300px;
}

const start = document.querySelector('#start');
const reset = document.querySelector('#reset');
const size = document.querySelector('#size');
const resize = document.querySelector('#resize');
const main = document.querySelector('main');
const section = document.querySelector('section');

let timeout;
let resizeObserver;

start.addEventListener('click', function () {
  resizeObserver = new ResizeObserver(entries => {
    timeout = window.setTimeout(function () {
      section.style.width = `${entries[0].contentRect.width + 5}px`;
      
      if (entries[0].contentRect.width > 300) {
        resizeObserver.unobserve(main);
        window.clearTimeout(timeout);
      }
    }, 500);
  });
  resizeObserver.observe(main);
});

reset.addEventListener('click', function () {
  section.style.width = '100px';
  resizeObserver.unobserve(main);
  window.clearTimeout(timeout);
});

size.addEventListener('change', function () {
  main.classList.toggle('size', size.checked);
});

resize.addEventListener('click', function () {
  main.classList.toggle('resize');
});