<div class="wrapper">
    <article class="flow">
      <h1>Extrinsic sizing vs intrinsic sizing</h1>
      <figure class="callout">
          Notice that when the box is using <strong>extrinsic sizing</strong>, there’s
          a limit of how much content you can add before it overflows out of the box’s
          bounds. This makes the word, “awesome”, overflow.
      <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>
      <p class="awesome" data-element="awesome">CSS is awesome</p>
.awesome {
  text-transform: uppercase;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  border: 5px solid;
  padding: 2rem;

  /* The important extrinsic width */
  width: 320px;

.awesome[data-sizing="intrinsic"] {
  width: min-content;


Presentational styles 
.awesome {
  --flow-space: 2rem;

const awesome = document.querySelector('[data-element="awesome"]');
const intrinsicSwitch = document.querySelector("#intrinsic-switch");

// Set sizing attribute based on switch
intrinsicSwitch.addEventListener("change", () => {
    intrinsicSwitch.checked ? "intrinsic" : "extrinsic"

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.