CSS: CSS Width, Height & Overflow

Last updated: 2026-10-13

Properties in this section: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

1. Width and Height

(1) Dimension Properties Quick Reference

(2) width and height

width and height set the element's content area dimensions:

▶ Example

(3) Common Units

▶ Example

(4) min-width / max-width

Limit element's minimum/maximum width, commonly used in responsive design:

▶ Example

(5) min-height / max-height

▶ Example

2. calc() Function

calc() is a CSS function that allows mathematical calculations (add, subtract, multiply, divide) in property values. Its biggest advantage is mixing different units.

▶ Example

(1) Common Use Cases

1. Sidebar + Main content: .main { width: calc(100% - 300px); } adapts to remaining space
2. Equal-spacing cards: .card { width: calc((100% - 40px) / 3); } three columns with 20px gaps
3. Responsive font: font-size: calc(14px + 0.5vw); base size + viewport increment
4. Precise centering: left: calc(50% - 100px); known offset alternative to transform

(2) calc() Compatibility

calc() is supported in IE11+, Chrome 26+, Firefox 16+, Safari 7+ and can be safely used in modern projects. Just avoid string concatenation in calc().

3. Overflow Control

When element content exceeds set width/height, "overflow" occurs. The overflow property controls how overflow content is handled.

(1) overflow Values

▶ Example

(2) Controlling Each Direction

▶ Example

(3) Common Use Cases

1. Text Ellipsis

Combined with text-overflow for single-line text truncation:

▶ Example

2. Image Cropping

Fixed container size with hidden overflow for images:

▶ Example

3. Scroll Container

Create a fixed-height scrollable area:

▶ Example

4. Clear Floats

Setting overflow: hidden or overflow: auto on parent clears child float effects:

▶ Example

4. object-fit (Image/Video Adaptation)

object-fit controls how <img> or <video> replacement elements adapt to container size:

▶ Example

• cover: Maintains ratio, fills container, crops excess (most common)
• contain: Maintains ratio, shows complete image, may leave whitespace
• fill: Stretches to fill without maintaining ratio (may distort)
• none: Maintains original size
• scale-down: Takes smaller of none and contain

5. CSS Dimension Functions

(1) calc()

calc() enables dynamic dimension calculations in CSS, mixing different units:

▶ Example

Note: Operators must have spaces on both sides, otherwise they won't be recognized.

Properties in this section: width height min-width max-width min-height max-height overflow overflow-x overflow-y text-overflow object-fit

❓ FAQ

📖 Summary

• Controlling element dimensions and overflow behavior is fundamental to layout
• width/height set dimensions, min-width/max-width constrain range, overflow handles overflowing content
• object-fit: cover is a powerful tool for image handling, while calc() provides flexible dynamic calculation
• Mastering these properties gives you better control over element behavior in all situations

📝 Exercises

1. Create a "responsive container" — width 80%, max-width 1200px, min-width 320px, centered horizontally.
2. Create a fixed-size image container (300×200) with a larger image, using object-fit: cover to fill without distortion.
3. Implement "single-line text ellipsis" and "multi-line text overflow" effects (hint: multi-line uses -webkit-line-clamp).
4. Use calc() to implement a "full screen minus navigation bar height" layout.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us