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

<aside>
  <div class="control">
    <input id="size" type="checkbox" /> 
    <label for="size">contain: size</label>
  </div>
  <div class="control">
    <button id="start">start</button>
    <button id="reset">reset</button>
    <button id="resize">resize container</button>
  </div>
</aside>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

html {
  width: 100vw;
  min-height: 100vh;
}
body {
  align-items: center;
  background-color: #1d1e22;
  color: white;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  justify-content: center;
  margin: 0;
  padding: 0;
  
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}


button {
  margin-top: 40px;
  border-radius: 6px;
  background-color: transparent;
  border: 4px solid #fff;

  padding: 10px 20px;
  outline: none;
  color: #fff;
  cursor: pointer;

  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

button:active {
  color: #fff;
  border-color: #cfcfcf;
  transform: rotate(0.1deg) scale(0.9);
  transform-origin: 50% 100%;
}


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;
}
View Compiled
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');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.