Min and Max

You will use CSS min-width, max-width, min-height, and max-height to keep elements readable and predictable across screen sizes.

What it is

Min and max size properties set boundaries instead of fixed sizes. min-width says an element should not become narrower than a value. max-width says it should not become wider than a value. min-height and max-height do the same for height. Together they let a layout flex while staying usable.

Related terms include fluid layout, responsive design, content box, and logical properties such as min-inline-size and max-inline-size.

Why it matters

• Prevents text columns from becoming too narrow on small screens.
• Keeps large screens from stretching content into unreadable lines.
• Helps cards, buttons, and panels keep a minimum usable size.
• Allows scrollable regions when content exceeds a maximum height.
• Reduces the need for many media queries.

Syntax or steps

The smallest useful pattern is a centered container that can shrink but not disappear:

.container {
  min-width: 320px;
  max-width: 1200px;
  margin: 0 auto;
}

Use min-height and max-height when you need a vertical boundary, such as a scrollable panel.

Example

<style>
.page {
  min-width: 320px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #ccc;
}

.card {
  min-height: 120px;
  max-height: 240px;
  overflow: auto;
  padding: 1rem;
  border: 1px solid #999;
}
</style>

<div class="page">
  <div class="card">
    <p>This card stays at least 120px tall, but scrolls if content exceeds 240px.</p>
  </div>
</div>

Part by part

• .page grows with available space up to 1200px, then stops.
• margin: 0 auto centers the block when its width is less than the viewport.
• min-width: 320px keeps the page from becoming too narrow.
• .card reserves at least 120px of height.
• max-height: 240px plus overflow: auto creates a scrollable area if content is longer.

Common mistakes

• Using max-width on an inline element and expecting it to work. Give the element display: block, inline-block, or a flex/grid context.
• Setting max-height without overflow. Content may spill outside the box.
• Confusing min-width with width. width requests a size; min-width only sets a lower limit.
• Forgetting that padding and borders can affect total size unless box-sizing: border-box is used.

When to use it

Practice

Guided exercise: Create a .container with max-width: 900px, min-width: 320px, and margin: 0 auto. Resize the browser window. Expected behavior: the container shrinks down to 320px, then stops, and grows up to 900px, then stops.

Challenge: Add a .note with min-height: 100px, max-height: 200px, and overflow: auto. Hint: put enough text inside to trigger scrolling.

Quick check

Question: If a block element has width: 100% and max-width: 500px, how wide is it on an 800px viewport, ignoring padding and borders?

Answer: It is 500px wide, because max-width caps the computed width.

Summary

Min and max properties describe safe ranges, not exact sizes. They let CSS adapt to different viewports while preventing layouts from becoming too small, too wide, or too tall.