CSS overflow

When content becomes bigger than its container, it can break the page layout. This happens often due to long text, dynamic data, or small screens.

CSS fixes this using overflow and scroll behavior properties. They control whether extra content is shown, hidden, or scrollable, keeping the page clean and usable.

The Concept of a “Box” in CSS

What Is a CSS Box?

In CSS, every visible HTML element is treated as a rectangular box. This rule applies to all elements—such as div, section, article, p, img, button, and more. There are no exceptions. If you can see it on the page, it is a box.

How Size Affects the Box

When you write CSS like this:

div {
  height: 100px;
}

You are telling the browser:

“This box can only be 100 pixels tall.”

The browser will strictly try to keep the box within this height.

What is Overflow?

Overflow happens when the content inside an element becomes bigger than the visible area of that element. In simple words, the box is too small, so all the content cannot fit inside it.

Overflow control is critical because:

Websites must work on different screen sizes
Content length is often unpredictable
Scrolling directly affects user experience
Uncontrolled overflow breaks layouts and design

Without proper overflow control, building modern and responsive websites would not be possible.

The overflow Property in CSS

The overflow property in CSS controls what happens when content goes outside an element’s box. By default, it applies to both horizontal and vertical overflow, unless you use overflow-x or overflow-y separately.

The important point is that overflow does not change the size of the box. The box stays the same size. This property only controls how the extra content is shown, hidden, or accessed.

When content is larger than the box, the browser follows the rule defined by the overflow value.

Common Values of overflow

visible (default)
Extra content is shown outside the box.
hidden
Extra content is cut off and not visible.
auto
Scrollbars appear only when needed.
scroll
Scrollbars are always shown, even if content fits.

Each value represents a different way to handle extra content and should be chosen based on design and usability needs.

overflow: hidden

The overflow: hidden property tells the browser to hide any content that goes outside the element’s box.
The box keeps its fixed size, but anything that does not fit inside it becomes invisible.

No scrollbar is shown, and the user cannot scroll to see the hidden content.

Example

.card {
  height: 100px;
  overflow: hidden;
}

If the content inside .card needs more than 100px of space, the extra part will be hidden.

Important Notes

overflow: hidden does not add scrollbars
Hidden content cannot be accessed by scrolling
Use carefully, because important content may become invisible

Common Use Cases

Cropping images
Hiding extra text
Preventing elements from breaking layouts
Creating masked or clipped UI elements

`overflow: auto`

The overflow: auto property allows the browser to handle overflow automatically.
When the content fits inside the box, nothing extra is shown. When the content becomes larger than the box, scrollbars appear only when needed.

This makes overflow: auto one of the most practical and commonly used overflow values.

Example

.container {
  height: 150px;
  overflow: auto;
}

If the content inside .container exceeds 150px in height, a scrollbar will appear automatically.

Common Use Cases

Content boxes with unknown text length
Chat messages or comment sections
Data lists and tables
Modal windows and side panels

Important Notes

Scrollbars appear only when needed
Works for both horizontal and vertical overflow
Best choice for responsive layouts with dynamic content

overflow: scroll

The overflow: scroll property forces the browser to always show scrollbars, even if the content completely fits inside the element.

The box size stays fixed, but scrolling is enabled at all times.

Example

.panel {
  height: 150px;
  overflow: scroll;
}

A scrollbar will appear inside .panel even if the content height is less than 150px.

Common Use Cases

UI layouts where consistent scrollbar space is required
Dashboards or fixed-height panels
Preventing layout shift when content size changess

Important Notes

Scrollbars are visible all the time
Can look unnecessary if content fits
Affects both horizontal and vertical scrolling unless separated

overflow-x and overflow-y

The overflow-x and overflow-y properties let you control overflow separately for horizontal and vertical directions.

Instead of applying one rule to both directions, you can decide exactly how content should behave on each axis.

What Each Property Controls

overflow-x → controls overflow from left to right (horizontal)
overflow-y → controls overflow from top to bottom (vertical)

Both properties accept the same values:
visible, hidden, auto, scroll

Example

.box {
  width: 200px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}

Result:

Extra horizontal content can be scrolled
Extra vertical content is hidden

scroll-behavior: smooth

The scroll-behavior: smooth property controls how scrolling happens, not whether scrolling is allowed.
It tells the browser to move smoothly between scroll positions instead of jumping instantly.

This creates a more natural and user-friendly scrolling experience.

Example

html {
  scroll-behavior: smooth;
}