<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Extrinsic sizing vs intrinsic sizing</h1>
      <figure class="callout">
        <p>Toggle intrinsic sizing on and off to see how you can gain more control with <strong>extrinsic sizing</strong> and let the content have more control with <strong>intrinsic sizing</strong>. </p>
        <p>To see the effect that intrinsic and extrinsic sizing has, go ahead and add a few sentences of content to the card to see the vast differences in display.</p>
      </figure>
      <label class="toggle" for="intrinsic-switch">
        <span class="toggle__label">Turn on intrinsic sizing</span>
        <input type="checkbox" role="switch" class="toggle__element" id="intrinsic-switch" />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <div class="box-layout">
        <div class="dimension-label" aria-live="polite" aria-label="Current box width">
          <span data-element="width-label"></span>
        </div>
        <div></div>
        <figure class="box-demo box" data-element="parent-box">
          <img src="http://source.unsplash.com/CiFaYIvZyyA/800" alt="A purple Petunia flower in close focus" />
          <figcaption contenteditable>
            You can edit this text to see how it changes the layout of our box,
            depending on intrinsic and extrinsic sizing.
          </figcaption>
        </figure>
        <div class="dimension-label" aria-live="polite" aria-label="Current box height" data-orientation="vertical">
          <span data-element="height-label"></span>
        </div>
      </div>
    </article>
  </div>
</main>

.box-demo {
  width: 400px;
  height: 400px;
}

.box-demo[data-sizing="intrinsic"] {
  width: max-content;
  height: max-content;
}

.box-layout {
  display: grid;
  width: max-content;
  gap: 0.5rem;
  grid-template-columns: 1fr min-content;
}

const parentBox = document.querySelector('[data-element="parent-box"]');
const heightLabel = document.querySelector('[data-element="height-label"]');
const widthLabel = document.querySelector('[data-element="width-label"]');
const intrinsicSwitch = document.querySelector("#intrinsic-switch");

// Update the size labels on resize
const observer = new ResizeObserver((observedItems) => {
  const { borderBoxSize } = observedItems[0];

  widthLabel.innerText = `${Math.round(borderBoxSize[0].inlineSize)}px`;
  heightLabel.innerText = `${Math.round(borderBoxSize[0].blockSize)}px`;
});

observer.observe(parentBox);

// Set sizing attribute based on switch
intrinsicSwitch.addEventListener("change", () => {
  parentBox.setAttribute(
    "data-sizing",
    intrinsicSwitch.checked ? "intrinsic" : "extrinsic"
  );
});