CSS Width, Height & Overflow

Width and Height

Dimension Properties Quick Reference

Property	Common Values	Purpose
`width`	`300px`, `50%`, `50vw`, `auto`	Element content width
`height`	`200px`, `50%`, `50vh`, `auto`	Element content height
`min-width`	`320px`, `50%`	Minimum width (prevents too small)
`max-width`	`1200px`, `80%`	Maximum width (common in responsive)
`min-height`	`200px`, `100vh`	Minimum height
`max-height`	`400px`	Maximum height (overflows if exceeded)
`overflow`	`visible`, `hidden`, `scroll`, `auto`	How to handle overflowing content
`overflow-x`	`visible`, `hidden`, `scroll`, `auto`	Horizontal overflow control
`overflow-y`	`visible`, `hidden`, `scroll`, `auto`	Vertical overflow control

width and height

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

Example

HTML

<style>
.box {
  width: 300px;
  height: 200px;
  background: #f0f0f0;
}
</style>
<div class="box">Box element showing dimension range</div>

▶ Try it Yourself

Common Units

Example

HTML

<style>
.pixel {
  width: 300px;
  background: #e3f2fd;
}
.percent {
  width: 50%;
  background: #fce4ec;
}
.vw-vh {
  width: 50vw;
  height: 100vh;
  background: #e8f5e9;
}
.auto-width {
  width: auto;
  background: #fff3e0;
}
</style>
<div class="pixel">Pixel unit: fixed width 300px</div>
<div class="percent">Percent unit: width 50%</div>
<div class="vw-vh">Viewport unit: width 50vw</div>
<div class="auto-width">Auto width: determined by content</div>

▶ Try it Yourself

min-width / max-width

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

Example

HTML

<style>
.container {
  width: 80%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="container">Container with responsive width constraints</div>

▶ Try it Yourself

min-height / max-height

Example

HTML

<style>
.card {
  min-height: 200px;
  max-height: 400px;
  background: #fff3e0;
  border: 1px solid #ccc;
}
</style>
<div class="card">Card component with min/max height. Content exceeding max height will overflow and require overflow property to handle.</div>

▶ Try it Yourself

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.

📌 calc() rules: + and - must have spaces on both sides (calc(100% - 20px) ✅, calc(100%-20px) ❌), * and / spaces are optional.

Example

HTML

<style>
.layout {
  width: calc(100% - 300px);
  background: #e3f2fd;
  padding: 16px;
}

.sidebar {
  width: 300px;
  float: left;
  background: #fce4ec;
  padding: 16px;
  box-sizing: border-box;
}
</style>
<div class="layout">Main content: width = 100% - 300px</div>

▶ Try it Yourself

Common Use Cases

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

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().

Overflow Control

💡 overflow-x and overflow-y: When setting both horizontal and vertical overflow with different values, one may be forced to auto. Best practice is to use the overflow shorthand.

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

overflow Values

Example

HTML

<style>
.visible {
  overflow: visible;
  background: #fce4ec;
  height: 50px;
}
.hidden {
  overflow: hidden;
  background: #e8f5e9;
  height: 50px;
}
.scroll {
  overflow: scroll;
  background: #fff3e0;
  height: 50px;
}
.auto {
  overflow: auto;
  background: #e3f2fd;
  height: 50px;
}
</style>
<div class="visible">Visible area (overflow shows outside box)</div>
<div class="hidden">Content clipped when exceeding (overflow hidden)</div>
<div class="scroll">Scrollbar always visible even if content fits</div>
<div class="auto">Scrollbar appears only when content overflows</div>

▶ Try it Yourself

Controlling Each Direction

Example

HTML

<style>
.box {
  overflow-x: hidden;
  overflow-y: auto;
  width: 200px;
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}
</style>
<div class="box">Box element with horizontal overflow hidden and vertical auto-scroll for viewing all content</div>

▶ Try it Yourself

Common Use Cases

1. Text Ellipsis

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

Example

HTML

<style>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  border: 1px solid #ccc;
  padding: 8px;
  background: #f9f9f9;
}
</style>
<div class="ellipsis">This is a long text that will be truncated with ellipsis when exceeding container width</div>

▶ Try it Yourself

2. Image Cropping

Fixed container size with hidden overflow for images:

Example

HTML

<style>
.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  background: #e0e0e0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="avatar">Avatar container (circular crop)</div>

▶ Try it Yourself

3. Scroll Container

Create a fixed-height scrollable area:

Example

HTML

<style>
.scroll-box {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
}
</style>
<div class="scroll-box">
  <p>Line 1: Scroll container can display large content</p>
  <p>Line 2: Scrollbar appears when content exceeds height</p>
  <p>Line 3: Scroll to view hidden content</p>
  <p>Line 4: Implemented with overflow-y: auto</p>
  <p>Line 5: More content means more scrolling</p>
  <p>Line 6: Suitable for comment sections, announcements, etc.</p>
</div>

▶ Try it Yourself

4. Clear Floats

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

Example

HTML

<style>
.clearfix {
  overflow: hidden;
  background: #e8eaf6;
  padding: 10px;
}
</style>
<div class="clearfix">Float clearing container (overflow: hidden triggers BFC)</div>

▶ Try it Yourself

object-fit (Image/Video Adaptation)

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

Example

HTML

<style>
.image-container {
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
<div class="image-container">Image container (replace with actual image)</div>

▶ Try it Yourself

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

CSS Dimension Functions

calc()

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

Example

HTML

<style>
.calc-demo {
  width: calc(100% - 40px);
  height: calc(50vh - 60px);
  background: #e3f2fd;
  border: 1px solid #90caf9;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="calc-demo">Width auto-subtracts 40px, height is half viewport minus 60px</div>

▶ Try it Yourself

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

❓ FAQ

Q Why doesn't height: 100% work?

A Percentage height is relative to the parent's height. If the parent's height is auto (determined by content), the child's height: 100% can't be calculated — because the parent hasn't determined its own height yet. To make percentage heights work, the parent needs an explicit height value.

Q What's the difference between max-width: 100% and width: 100%?

A width: 100% forces the element to equal parent width, even if content is small. max-width: 100% means "never exceed parent width" — if the element is naturally smaller, it stays smaller. Using max-width: 100% for responsive images is best practice.

Q Does overflow: hidden hide all overflowing content?

A Yes. overflow: hidden clips all content exceeding element dimensions. If you need to scroll through overflow content, use overflow: auto (scrollbar appears when needed) or overflow: scroll (always shows scrollbar). overflow: hidden is also commonly used to trigger BFC (Block Formatting Context) to solve float issues.

📖 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

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

CSS Width, Height & Overflow

Width and Height

Dimension Properties Quick Reference

width and height

Example

Common Units

Example

min-width / max-width

Example

min-height / max-height

Example

calc() Function

Example

Common Use Cases

calc() Compatibility

Overflow Control

overflow Values

Example

Controlling Each Direction

Example

Common Use Cases

Example

Example

Example

Example

object-fit (Image/Video Adaptation)

Example

CSS Dimension Functions

calc()

Example

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好