Controls content outside container.

Difference between auto and scroll?

Auto shows scroll only if needed.

Shows ... for overflowing text.

CSS Overflow - Learn HTML | Revochamp

Name: CSS Overflow
Availability: InStock
Author: Revochamp

What is Overflow?

The overflow property controls what happens when content exceeds the size of its container.

Basic Example

CSSRead-only

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

Overflow Values

Value	Description
visible	Default, content overflows
hidden	Clips extra content
scroll	Always shows scrollbars
auto	Shows scrollbars if needed

Overflow Hidden

CSSRead-only

div {
  overflow: hidden;
}

div {
  overflow: hidden;
}

Overflow Scroll

CSSRead-only

div {
  overflow: scroll;
}

div {
  overflow: scroll;
}

Overflow Auto

CSSRead-only

div {
  overflow: auto;
}

div {
  overflow: auto;
}

Overflow X and Y

CSSRead-only

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

Text Overflow (Ellipsis)

CSSRead-only

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Scroll Behavior

CSSRead-only

html {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

Best Practices

Use auto instead of scroll for better UX
Use hidden to prevent layout breaking
Use ellipsis for long text
Control overflow-x and overflow-y separately

Common Mistakes

Forgetting to set width/height
Using scroll unnecessarily
Clipping important content with hidden
Ignoring mobile scroll behavior

Conclusion

CSS overflow helps manage extra content effectively. Proper usage ensures clean layouts and better user experience.

Value

Description

visible

Default, content overflows

hidden

Clips extra content

scroll

Always shows scrollbars

auto

Shows scrollbars if needed

CSS Overflow

CSS Overflow

What is Overflow?

Basic Example

Overflow Values

Overflow Hidden

Overflow Scroll

Overflow Auto

Overflow X and Y

Text Overflow (Ellipsis)

Scroll Behavior

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

CSS Overflow

CSS Overflow

What is Overflow?

Basic Example

Overflow Values

Overflow Hidden

Overflow Scroll

Overflow Auto

Overflow X and Y

Text Overflow (Ellipsis)

Scroll Behavior

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?