Fit content

You can see how width: fit-content compares to other width values like auto, max-content, and min-content. The demo shows:

Visual comparisons - Notice how fit-content wraps the content tightly while auto takes the full width
Centering example - See why fit-content is perfect for centering elements with margin: 0 auto
Interactive section - Type in the text box to see how fit-content adapts in real-time compared to regular width: auto

The key difference you'll notice: fit-content makes the element only as wide as its content needs, while width: auto on block elements takes the full width of the container.

<div class="container">
  <h1>width: fit-content</h1>
  <p class="subtitle">See how it works compared to other width values</p>

  <div class="demo-section">
    <h2>Basic Comparison</h2>

    <div class="example-box">
      <div class="label">width: auto (default for block elements)</div>
      <div class="container-box">
        <span class="container-label">Container</span>
        <div class="demo-element width-auto">This takes full width</div>
      </div>
    </div>

    <div class="example-box">
      <div class="label">width: fit-content</div>
      <div class="container-box">
        <span class="container-label">Container</span>
        <div class="demo-element width-fit-content">This fits the content</div>
      </div>
    </div>

    <div class="example-box">
      <div class="label">width: max-content</div>
      <div class="container-box">
        <span class="container-label">Container</span>
        <div class="demo-element width-max-content">
          This tries to stay on one line (can overflow!)
        </div>
      </div>
    </div>

    <div class="example-box">
      <div class="label">width: min-content</div>
      <div class="container-box">
        <span class="container-label">Container</span>
        <div class="demo-element width-min-content">
          This wraps aggressively
        </div>
      </div>
    </div>
  </div>

  <div class="demo-section">
    <h2>Perfect for Centering</h2>

    <div class="example-box">
      <div class="label">width: fit-content + margin: 0 auto</div>
      <div class="container-box">
        <span class="container-label">Container</span>
        <div class="demo-element width-fit-content centered">
          Centered Button
        </div>
      </div>
    </div>
  </div>

  <div class="interactive-section">
    <h2>Interactive Demo</h2>
    <p style="margin-bottom: 15px; color: #555;">
      Type something to see how <code>fit-content</code> adapts:
    </p>

    <div class="controls">
      <input
        type="text"
        id="userInput"
        placeholder="Type your text here..."
        value="Hello, I'm fit-content!"
      />
    </div>

    <div class="comparison-grid">
      <div class="example-box">
        <div class="label">width: auto</div>
        <div class="demo-element width-auto" id="autoDemo">
          Hello, I'm fit-content!
        </div>
      </div>

      <div class="example-box">
        <div class="label">width: fit-content</div>
        <div class="demo-element width-fit-content" id="fitDemo">
          Hello, I'm fit-content!
        </div>
      </div>
    </div>

    <div class="comparison-grid">
      <div class="example-box">
        <div class="label">width: min-content</div>
        <div class="demo-element width-min-content" id="minDemo">
          Hello, I'm min-content!
        </div>
      </div>

      <div class="example-box">
        <div class="label">width: max-content</div>
        <div class="demo-element width-max-content" id="maxDemo">
          Hello, I'm max-content!
        </div>
      </div>
    </div>
  </div>

  <div
    class="demo-section"
    style="margin-top: 40px; padding-top: 30px; border-top: 2px solid #eee;"
  >
    <h2>Key Takeaway</h2>
    <p style="color: #555; line-height: 1.8; font-size: 1.05em;">
      <code>width: fit-content</code> makes your element shrink-wrap its content
      while respecting container boundaries. It's perfect for buttons, badges,
      and any element that should be only as wide as it needs to be.
    </p>
  </div>
</div>

<script></script>