Min and Max Sizing

Constrain elements with min-w, max-w, min-h and max-h.

Syntaxclass="max-w-md min-h-screen"

Min and max utilities set limits so content stays readable at any size.

max-w-sm, max-w-md, max-w-lg — named max widths.
min-h-screen — at least the full viewport height.
max-w-full — never overflow the parent.

max-w-* is the common way to keep text lines from getting too wide.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer prevents a sidebar from collapsing below 200px on small screens by adding min-w-[200px] to the sidebar element.
A content column is capped at a readable 65-character line length using max-w-prose to improve typography.
A modal is constrained to a max width on desktop with max-w-lg while still filling the screen on mobile with w-full.

More examples

Max-width readable prose

max-w-prose caps the line length at roughly 65 characters (the CSS ch unit), which is considered optimal for reading comfort.

<article class="max-w-prose mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-4">Article Title</h1>
  <p class="text-gray-700 leading-relaxed">
    Long-form article content here.
  </p>
</article>

Modal with max-w-lg

w-full lets the modal fill small screens, while max-w-lg prevents it from growing wider than 32rem on large viewports.

<div class="fixed inset-0 flex items-center justify-center p-4">
  <div class="bg-white rounded-lg p-6 w-full max-w-lg">
    <h2 class="text-xl font-semibold">Confirm Action</h2>
    <p class="mt-2 text-gray-600">Are you sure?</p>
  </div>
</div>

Min-height full viewport

min-h-screen ensures the main element is at least as tall as the viewport, pushing the footer to the bottom on short pages.

<main class="min-h-screen flex flex-col">
  <div class="flex-1 container mx-auto py-8">
    Page content fills available height.
  </div>
  <footer class="bg-gray-100 py-4 text-center text-sm">Footer</footer>
</main>

Discussion

Be the first to comment on this lesson.