Syllabus

CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height

Badar KhalilUpdated September 30, 2026 9 min read

CSS Width, Height, Min-Width, Max-Width, Min-Height and Max-Height

The CSS properties width, height, min-width, max-width, min-height and max-height control the size of an element's box. Understanding them, together with units such as %, rem, vw and dvh and functions such as clamp(), is the key to responsive design. This lesson explains how the browser calculates sizes, when to use min and max limits, and how to avoid classic problems such as overflow, collapsed heights and the mobile 100vh bug.

What You Will Learn

How width and height behave by default (auto)
Sizing units: px, %, em, rem, vw, vh, svh, lvh, dvh, ch
How min-width, max-width, min-height and max-height work and which one wins
The responsive image and container pattern with max-width
Intrinsic sizing keywords: min-content, max-content, fit-content
Modern functions: min(), max() and clamp()
aspect-ratio, overflow and logical sizing properties

The width Property

width sets the width of the content box (or the border box if box-sizing: border-box). The default value is auto, and what auto means depends on the element:

Block elements: fill the available width of the parent (minus their own margin, border and padding).
Inline elements: width does not apply; the width is set by the content.
Floated, absolutely positioned and inline-block elements: shrink to fit their content.
Flex and grid items: sized by the flex or grid algorithm.

width: auto vs width: 100%

A block with width: auto automatically fits inside its parent, including margin, border and padding. With width: 100%, the content box alone becomes as wide as the parent, so padding, border or margin can push the element out (in content-box mode). Prefer auto for normal blocks, and always use box-sizing: border-box globally.

The height Property

The default height: auto means the height is determined by the content. Fixed heights are risky for text containers because content can overflow when fonts are larger, text is translated or the viewport is narrow. Prefer min-height for boxes that contain text.

Percentage Heights Need a Parent Height

A percentage height only works if the parent has a definite height. If the parent height is auto, the percentage computes to auto. To make a page-level layout fill the screen, give the root elements a height or use min-height: 100dvh instead.

Sizing Units Overview

Unit	Relative to	Typical use
px	Fixed CSS pixel	Borders, small fixed sizes
%	Containing block size	Fluid widths
em	Element font size	Components that scale with text
rem	Root font size	Spacing and size systems
ch	Width of the character 0	Readable line length (max-width: 65ch)
vw, vh	1% of viewport width or height	Full-screen sections
svh, lvh, dvh	Small, large or dynamic viewport height	Mobile-safe full-height layouts
cqw, cqh	Container query size	Component-level responsive sizes

The Mobile 100vh Problem and dvh

On phones, the browser address bar can show or hide, so 100vh (based on the largest viewport) can be taller than the visible screen and cause a jump or a hidden footer. Modern CSS provides svh (smallest viewport), lvh (largest) and dvh (dynamic, updates as the bars change). For full-screen sections, use min-height: 100dvh, with min-height: 100vh as a fallback written before it.

min-width and max-width

max-width sets an upper limit: the element can shrink but never grows beyond it.
min-width sets a lower limit: the element can grow but never gets smaller.

The most important pattern in responsive design is max-width with fluid widths. A container with width: 100%; max-width: 1200px; margin-inline: auto; is fluid on small screens and centered with a cap on large screens. Another classic is img { max-width: 100%; height: auto; }, which makes images scale down inside their containers without distortion.

min-height and max-height

min-height guarantees a minimum size but lets the box grow with content. Perfect for hero sections, cards and full-page layouts (for example a sticky footer).
max-height caps the size. Combine with overflow: auto for scrollable panels, dropdowns and chat boxes.

Which Wins: width, min-width or max-width?

The browser calculates the width first, then applies the limits in this order: if the result is larger than max-width, it is reduced to max-width; then if it is smaller than min-width, it is raised to min-width. So min-width always beats max-width when they conflict, and both beat width. The same rules apply to height, min-height and max-height.

Intrinsic Sizing Keywords

min-content: the smallest size that does not cause overflow (for text, the longest word).
max-content: the size needed to lay out all content on one line.
fit-content (or fit-content(200px)): uses the available space, but never more than max-content and never less than min-content. It is excellent for shrink-wrapped centered boxes: width: fit-content; margin-inline: auto;.

Modern Functions: min(), max() and clamp()

width: min(100%, 60rem) is a one-line replacement for width 100% plus max-width 60rem.
width: max(50%, 300px) picks the larger of the two values.
width: clamp(16rem, 50%, 40rem) sets a minimum, a preferred fluid value and a maximum. It is widely used for fluid typography and spacing as well.

aspect-ratio

The aspect-ratio property keeps a consistent ratio between width and height, for example aspect-ratio: 16 / 9; for videos or 1 / 1 for avatars. It replaces the old padding-top percentage hack. Combine it with object-fit: cover on images to avoid distortion and reduce layout shift (good for Core Web Vitals and CLS). Setting width and height attributes on images also lets browsers reserve space before the image loads.

Overflow: What Happens When Content Is Bigger?

When content exceeds a fixed width or height, the overflow property decides the result: visible (default, content spills out), hidden (clipped), scroll or auto (scrollbars when needed). Use overflow-x: auto on wide tables and code blocks so they scroll inside their own container instead of breaking the page width.

Flexbox and Grid: The min-width: 0 Fix

Flex and grid items have a default min-width: auto, which prevents them from shrinking below their content size. A long word or wide image can cause overflow. Setting min-width: 0 (or overflow: hidden) on the flex item lets it shrink, and is the standard fix for text that refuses to truncate inside flex layouts. In Grid, minmax(0, 1fr) does the same job.

Logical Sizing Properties

Logical equivalents adapt to writing mode: inline-size (width in horizontal text), block-size (height), min-inline-size, max-inline-size, min-block-size and max-block-size.

Readable Line Length with ch

For comfortable reading, limit paragraph width to about 60 to 75 characters: p { max-width: 65ch; }. The ch unit scales with the font, so the line length stays readable at any size.

Common Mistakes

Using a fixed height on text containers, causing overflow.
Using width: 100% with padding in content-box mode.
Expecting percentage height to work when the parent has no height.
Using 100vh on mobile without dvh, hiding content behind the browser bars.
Using fixed width: 1200px instead of max-width, which breaks small screens.
Forgetting height: auto on responsive images with width or height attributes.
Confusing min-width (floor) with max-width (ceiling).

Best Practices

Prefer max-width over width for containers and media.
Prefer min-height over height for boxes that hold text.
Use dvh with a vh fallback for full-screen sections.
Use rem, ch and clamp() for scalable, accessible sizes.
Use aspect-ratio for media to avoid layout shift.
Set box-sizing: border-box globally.

Frequently Asked Questions

What is the difference between width and max-width?

Width sets a preferred size. Max-width is an upper limit that allows the element to shrink on small screens but never grow beyond the cap.

Why is height: 100% not working?

The parent does not have a definite height. Set the parent height, or use min-height with viewport units.

What is the difference between vh and dvh?

vh uses the largest viewport height, while dvh follows the visible height as mobile browser bars show and hide.

Does min-width override max-width?

Yes. When both conflict, min-width wins.

Key Takeaways

Default width and height are auto, driven by the layout and the content.
max-width and min-height are the responsive-friendly choices for containers and text boxes.
min-width beats max-width, and both beat width.
Use dvh, clamp(), min(), ch and aspect-ratio for modern, mobile-safe sizing.
Use min-width: 0 to fix overflow in flex items.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
.parent { background: #eaf2f8; padding: 10px; width: 400px; font-family: sans-serif; }
.auto { background: #aed6f1; padding: 16px; margin: 8px 0; border: 4px solid #2471a3; }
.full { background: #f5b7b1; padding: 16px; margin: 8px 0; border: 4px solid #c0392b; width: 100%; }
</style>
<div class='parent'>
  <div class='auto'>width: auto fills the parent</div>
  <div class='full'>width: 100% (border-box keeps it inside)</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
.container { width: 100%; max-width: 600px; margin-inline: auto; padding: 16px; background: #d5f5e3; }
img { max-width: 100%; height: auto; }
</style>
<div class='container'>
  <h3>Fluid, capped and centered</h3>
  <p>Resize the preview window. The container shrinks on small screens and stops growing at 600px.</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
.box { font-family: sans-serif; padding: 12px; margin: 8px 0; background: #fad7a0; }
.a { width: 500px; max-width: 300px; }                   /* capped to 300px */
.b { width: 100px; min-width: 250px; }                   /* raised to 250px */
.c { width: 500px; max-width: 200px; min-width: 350px; } /* min-width wins: 350px */
</style>
<div class='box a'>width 500, max-width 300 = 300px</div>
<div class='box b'>width 100, min-width 250 = 250px</div>
<div class='box c'>min-width beats max-width = 350px</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.card { width: 260px; min-height: 120px; padding: 16px; background: #e8daef; margin-bottom: 12px; }
.scroll { width: 260px; max-height: 100px; overflow: auto; padding: 12px; background: #d6eaf8; }
</style>
<div class='card'>min-height: short content still gets 120px, and the box grows if the content is longer.</div>
<div class='scroll'>max-height with overflow auto: this panel scrolls when the content is longer than 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page header, .page footer { background: #2c3e50; color: white; padding: 16px; }
.page main { flex: 1; padding: 16px; background: #ecf0f1; }
</style>
<div class='page'>
  <header>Header</header>
  <main>Main content grows to push the footer to the bottom (sticky footer with min-height and dvh).</main>
  <footer>Footer</footer>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.fit { width: fit-content; margin-inline: auto; padding: 12px 20px; background: #abebc6; margin-bottom: 12px; }
.min { width: min-content; padding: 12px; background: #f9e79f; margin-bottom: 12px; }
.max { width: max-content; max-width: 100%; padding: 12px; background: #f5b7b1; }
</style>
<div class='fit'>fit-content and centered</div>
<div class='min'>min-content wraps every word</div>
<div class='max'>max-content keeps it on one line</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.a { width: min(100%, 420px); padding: 12px; background: #aed6f1; margin-bottom: 10px; }
.b { width: max(50%, 250px); padding: 12px; background: #f5cba7; margin-bottom: 10px; }
.c { width: clamp(200px, 50%, 450px); padding: 12px; background: #d2b4de; }
</style>
<div class='a'>min(100%, 420px)</div>
<div class='b'>max(50%, 250px)</div>
<div class='c'>clamp(200px, 50%, 450px)</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
body { font-family: sans-serif; }
.video { aspect-ratio: 16 / 9; width: 100%; max-width: 400px; background: #34495e; color: white; display: grid; place-items: center; margin-bottom: 12px; }
.avatar { aspect-ratio: 1 / 1; width: 100px; background: #e67e22; border-radius: 50%; }
</style>
<div class='video'>16 / 9</div>
<div class='avatar'></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
body { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; margin: 20px; }
.readable { max-width: 65ch; }
</style>
<p class='readable'>With max-width set to 65ch, this paragraph stays at a comfortable reading length of about 65 characters per line on any screen size, which improves readability and accessibility for long articles.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.row { display: flex; gap: 10px; width: 320px; background: #eaf2f8; padding: 8px; }
.avatar { flex: none; width: 40px; height: 40px; background: #3498db; }
.text { background: #d6eaf8; padding: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
<div class='row'>
  <div class='avatar'></div>
  <div class='text'>Averyveryverylongunbrokenfilename_with_no_spaces_document.pdf</div>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const el = document.createElement('div');
el.style.cssText = 'width:500px;max-width:300px;min-width:350px;box-sizing:border-box;';
document.body.appendChild(el);
console.log('Rendered width:', el.getBoundingClientRect().width);
el.style.minWidth = '0';
console.log('Without min-width:', el.getBoundingClientRect().width);
el.remove();

Output

Press Run to execute.

Exercise: Build a Fluid Centered ContainerHTML

Make .container fill the width of small screens but never grow wider than 800px, and center it horizontally. Add 1rem of horizontal padding and make sure padding does not increase the total width.

Try it Yourself HTML

<style>
/* Add box-sizing reset and container rules here */
.container { background: #d5f5e3; font-family: sans-serif; }
</style>
<div class='container'>Fluid, capped and centered container.</div>

Output

Press Run to execute.

Show expected output

* { box-sizing: border-box; } .container { width: 100%; max-width: 800px; margin-inline: auto; padding-inline: 1rem; }

This is a self-check — compare your result with the expected output above.

Exercise: Fix the Hero Section HeightHTML

The hero has a fixed height and its text overflows on small screens. Change it so it is at least 60% of the dynamic viewport height but grows with its content. Keep a vh fallback before the dvh declaration.

Try it Yourself HTML

<style>
.hero { height: 300px; background: #34495e; color: white; padding: 24px; font-family: sans-serif; }
</style>
<div class='hero'>Long hero text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Output

Press Run to execute.

Show expected output

.hero { min-height: 60vh; min-height: 60dvh; }

This is a self-check — compare your result with the expected output above.

Exercise: Which Width Wins?JAVASCRIPT

Write a function finalWidth(width, minWidth, maxWidth) that returns the rendered width after applying the CSS rules: first cap at maxWidth, then raise to minWidth (so min-width wins on conflict). Use null for values that are not set.

Try it Yourself JAVASCRIPT

function finalWidth(width, minWidth, maxWidth) {
  // TODO: implement
}

console.log(finalWidth(500, null, 300));
console.log(finalWidth(100, 250, null));
console.log(finalWidth(500, 350, 200));

Output

Press Run to execute.

Show expected output

300
250
350

This is a self-check — compare your result with the expected output above.

Was this page helpful?