CSS Overflow

Learn how to control content that overflows its container using CSS overflow properties

What is CSS Overflow?

The CSS overflow property controls what happens to content that is too big to fit in an element's box. It specifies whether to clip content, add scrollbars, or display the overflowing content.

Overflow Properties:

  • overflow - Shorthand for overflow-x and overflow-y
  • overflow-x - Controls horizontal overflow
  • overflow-y - Controls vertical overflow
  • text-overflow - Determines how overflowed text is signaled
  • overflow-clip-margin - Defines how far content can overflow before being clipped
Content
Container
Overflow behavior controls what happens when content exceeds container bounds

Overflow in Action

Example Code

/* Overflow Properties */
.container {
  /* Basic overflow values */
  overflow: visible; /* Default - content is not clipped */
  overflow: hidden;  /* Content is clipped, no scrollbars */
  overflow: scroll;  /* Content is clipped, with scrollbars */
  overflow: auto;    /* Browser decides whether to add scrollbars */
  
  /* Overflow for specific axes */
  overflow-x: hidden;   /* Control horizontal overflow */
  overflow-y: scroll;   /* Control vertical overflow */
  
  /* Modern overflow properties */
  overflow: clip;       /* Similar to hidden but no programmatic scrolling */
  overflow: hidden auto; /* x-axis: hidden, y-axis: auto */
}

/* Text-specific overflow */
.text-container {
  white-space: nowrap;      /* Prevent text wrapping */
  overflow: hidden;         /* Hide overflow */
  text-overflow: ellipsis;  /* Show ellipsis when text overflows */
}

/* Customizing scrollbars (WebKit browsers) */
.scroll-container::-webkit-scrollbar {
  width: 12px;               /* Width of vertical scrollbar */
  height: 12px;              /* Height of horizontal scrollbar */
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;       /* Color of the tracking area */
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888;          /* Color of the scroll thumb */
  border-radius: 6px;        /* Roundness of the scroll thumb */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;          /* Color on hover */
}

/* Standard scrollbar properties (newer) */
.scroll-container {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #888 #f1f1f1;   /* thumb color, track color */
}

Overflow Properties in Detail

Basic Overflow Values

overflow: visible
Content overflows visibly
overflow: hidden
Content is clipped

Scrollable Overflow Values

overflow: scroll
Scrollbars always visible
overflow: auto
Scrollbars when needed

Axis-Specific Overflow

You can control overflow separately for horizontal and vertical axes using overflow-x and overflow-y properties.

.container {
overflow-x: hidden; /* Hide horizontal overflow */
overflow-y: auto; /* Vertical scroll when needed */
}
Horizontal overflow hidden, vertical auto

Text Overflow

The text-overflow property determines how overflowed text content is signaled to users. It only affects text that overflows in the inline direction (horizontally in normal Western text).

text-overflow: ellipsis

Renders an ellipsis ("...") to represent clipped text.

.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This is a very long text that will be truncated with an ellipsis at the end when it overflows the container.

text-overflow: clip

The default value. Text is clipped at the limit of the content area.

.clip-text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
This is a very long text that will be clipped at the end when it overflows the container.

Multi-line Text Overflow

For multi-line text overflow, you can use line-clamp (though it"s not part of the official specification yet).

.multi-line {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
This is a very long text that will be truncated after three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl aliquam nunc, eget aliquam nisl nunc eget nisl. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Scrollbar Styling

WebKit Scrollbar Styling

WebKit browsers (Chrome, Safari, Edge) support custom scrollbar styling with pseudo-elements.

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}

Standard Scrollbar Styling

The newer standard approach works in Firefox and newer versions of other browsers.

.scroller {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

Values for scrollbar-width:

  • auto - Default browser scrollbar
  • thin - Thinner scrollbar
  • none - No scrollbar visible

Overflow in Different Layouts

Overflow with Flexbox

In flex containers, overflow properties work slightly differently. You often need to set min-width: 0 on flex items to allow them to shrink properly.

.flex-container {
display: flex;
overflow-x: auto;
}

.flex-item {
min-width: 0; /* Allows text truncation */
overflow: hidden;
text-overflow: ellipsis;
}

Overflow with Grid

CSS Grid items can also have overflow issues. You may need to set min-width: 0 or min-height: 0 on grid items.

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}

.grid-item {
min-width: 0; /* Prevents overflow issues */
overflow: hidden;
}

Overflow with Positioned Elements

Absolutely positioned elements can overflow their containers. Use overflow: hidden on the container to clip positioned children.

.container {
position: relative;
overflow: hidden; /* Clips absolutely positioned children */
}

.absolute-child {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 150%;
}

Practical Overflow Examples

Scrollable Content Area

.scrollable-content {
height: 300px;
overflow-y: auto;
padding: 1rem;
}

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Horizontal Scrolling Gallery

.gallery {
display: flex;
overflow-x: auto;
gap: 1rem;
padding: 1rem 0;
}

.gallery-item {
flex: 0 0 auto;
width: 200px;
height: 150px;
}
Item 1
Item 2
Item 3
Item 4
Item 5

Truncated Text Components

.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.card-description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
This is a very long card title that should be truncated
This is a long description that will be truncated after three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget ultricies ultricies, nunc nisl aliquam nunc, eget aliquam nisl nunc eget nisl. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

CSS Overflow Properties Reference

PropertyDescriptionValues
overflowShorthand property for setting overflow-x and overflow-yvisible | hidden | clip | scroll | auto
overflow-xControls what happens to content that overflows horizontallyvisible | hidden | clip | scroll | auto
overflow-yControls what happens to content that overflows verticallyvisible | hidden | clip | scroll | auto
text-overflowDetermines how overflowed text is signaled to usersclip | ellipsis | string
overflow-clip-marginDetermines how far outside its bounds an element can be painted before being clippedlength | percentage
scrollbar-widthSets the width of the scrollbar (standard property)auto | thin | none
scrollbar-colorSets the color of the scrollbar track and thumb (standard property)auto | color color
scrollbar-gutterControls the presence of scrollbar gutter spaceauto | stable | both-edges
overscroll-behaviorControls what happens when scrolling reaches the boundary of a scroll containerauto | contain | none
overscroll-behavior-xControls the overscroll behavior along the x-axisauto | contain | none
overscroll-behavior-yControls the overscroll behavior along the y-axisauto | contain | none
scroll-behaviorControls whether scrolling is instant or animates smoothlyauto | smooth
scroll-marginShorthand for scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-leftlength
scroll-paddingShorthand for scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-leftlength | auto
scroll-snap-typeSets how strictly snap points are enforced on the scroll containernone | x | y | block | inline | both | mandatory | proximity
scroll-snap-alignSpecifies the snap position of an element within the scroll containernone | start | end | center

Browser Support Notes:

  • Most modern browsers support the basic overflow properties
  • overflow: clip is relatively new (supported in Chrome 90+, Firefox 81+, Safari 15+)
  • scrollbar-width and scrollbar-color have good support in modern browsers
  • WebKit scrollbar styling (::-webkit-scrollbar) works in Chrome, Safari, Edge
< PreviousNext >