Biggest possible div

Just a div that keeps growing until it can't

by ubershmekel

HTML

<p>Just testing how big this can get</p>
<pre id="dimensions"></pre>
<div id="space-maker" style="width: 100px; height: 10px;"></div>
<p>Under the space </p>

CSS

#space-maker {
  background: #3cf;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

}

JavaScript

let lastWidth = 0;
let lastHeight = 0;
let bigSteps = true;
function makeBigger() {
  let el = document.getElementById('space-maker');
  let rect = el.getBoundingClientRect();

  if (bigSteps) {
    el.style.height = (rect.height * 1.2) + "px";
    el.style.width = (rect.width * 1.2) + "px";
  } else {
    el.style.height = (rect.height + 1) + "px";
    el.style.width = (rect.width + 1) + "px";
  }

  let elDims = document.getElementById('dimensions');
  elDims.textContent = "Style size: " + el.style.width + " x " + el.style.height + "\nRect size: " + rect.width + " x " + rect.height;

 if (rect.width === lastWidth) {
    // ran out of width to add?
    if (rect.height === lastHeight) {
      // and height?!
      console.log("It didn't grow when I tried to grow it.")
      if (bigSteps) {
        // try to make small size changes
        bigSteps = false;
      } else {
        // stop the whole thing
        return;
      }
    }
  }
  lastWidth = rect.width;
  lastHeight = rect.height;
  console.log(el.getBoundingClientRect());
  window.setTimeout(makeBigger, 10);
}

makeBigger();