CSS Overflow

Control how content behaves when it's too large for its container using CSS overflow properties for better content management.

The overflow property controls what happens when content is too large to fit inside its container. It's essential for managing scrolling, clipping, and content visibility.

Overflow Values

.element {
  overflow: visible; /* Default - content overflows */
  overflow: hidden; /* Clip content */
  overflow: scroll; /* Always show scrollbars */
  overflow: auto; /* Show scrollbars only when needed */
}

Overflow: Visible (Default)

Content overflows the container and is visible:

.box {
  width: 200px;
  height: 100px;
  overflow: visible; /* Default */
}
/* Content exceeding dimensions will overflow */

Overflow: Hidden

Content is clipped and hidden:

.box {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Clips excess content */
}

Use cases:

Hiding overflowing content
Creating image containers
Clearfix for floats
Cropping content

Overflow: Scroll

Always shows scrollbars:

.box {
  width: 200px;
  height: 100px;
  overflow: scroll; /* Always shows scrollbars */
}

Overflow: Auto

Shows scrollbars only when content overflows:

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* Scrollbars appear when needed */
}

Recommended

Use overflow: auto instead of scroll for better UX - scrollbars only appear when necessary.

Directional Overflow

Control overflow separately for x and y axes:

.element {
  overflow-x: hidden; /* Horizontal overflow */
  overflow-y: auto; /* Vertical overflow */
}

/* Shorthand */
.element {
  overflow: hidden auto; /* x y */
}

Practical Examples

Scrollable Content Area

<!DOCTYPE html>
<html>
  <head>
    <style>
      .scroll-box {
        width: 300px;
        height: 200px;
        overflow: auto;
        border: 1px solid #ddd;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="scroll-box">
      <h3>Scrollable Content</h3>
      <p>Long content that exceeds the container height...</p>
      <p>More content...</p>
      <p>Even more content...</p>
    </div>
  </body>
</html>

Image Cropping

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  /* Image is cropped if taller than container */
}

Horizontal Scroll

.horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.horizontal-scroll-item {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
}

Card with Text Truncation

.card {
  width: 300px;
}

.card-description {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Overflow with Text

Text Overflow

Combines with text-overflow for ellipsis:

.truncate {
  width: 200px;
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ... */
}

Multi-line Ellipsis

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Clearfix Pattern

Classic clearfix using overflow:

.clearfix {
  overflow: auto;
  /* or */
  overflow: hidden;
}

/* Alternative modern clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Scroll Behavior

Control scroll behavior with scroll-behavior:

html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

Custom Scrollbars

Style scrollbars (WebKit browsers):

.custom-scroll::-webkit-scrollbar {
  width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Overflow with Flexbox/Grid

/* Flex container with scrolling */
.flex-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}

.flex-scroll-item {
  flex: 0 0 auto;
  width: 200px;
}

Common Patterns

.modal {
  max-height: 80vh;
  overflow-y: auto;
}

.sidebar {
  height: 100vh;
  overflow-y: auto;
}

Code Block

.code-block {
  overflow-x: auto;
  white-space: pre;
  padding: 1rem;
  background: #f5f5f5;
}

Table Wrapper

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  min-width: 600px;
}

Best Practices

Overflow Best Practices

Use overflow: auto instead of scroll for better UX - Always test overflow behavior with varying content - Use overflow: hidden sparingly - it can hide important content - Consider mobile users when implementing horizontal scroll - Provide visual indicators for scrollable content - Ensure keyboard navigation works with overflow: hidden - Test with different viewport sizes - Use overflow-wrap or word-break with overflow for text - Consider accessibility when hiding content

Accessibility

Hidden content with overflow: hidden is still accessible to screen readers
Use visibility: hidden or display: none if you want to hide from screen readers too
Ensure scrollable regions are keyboard accessible
Provide focus indicators for scrollable areas
Consider touch targets for mobile scrolling

Common Issues

Issue: Content cut off unexpectedly

/* Problem */
.parent {
  overflow: hidden;
}

.child {
  position: absolute; /* Can overflow */
}

/* Solution: Use overflow: visible on parent or adjust positioning */

Issue: Horizontal scroll on mobile

/* Problem: Elements wider than viewport */
.wide-element {
  width: 1200px;
}

/* Solution */
.wide-element {
  max-width: 100%;
  overflow-x: auto;
}

Understanding overflow is crucial for managing content layout and creating good user experiences!

The overflow property controls what happens when content is too large to fit inside its container. It's essential for managing scrolling, clipping, and content visibility.

Overflow Values

.element {
  overflow: visible; /* Default - content overflows */
  overflow: hidden; /* Clip content */
  overflow: scroll; /* Always show scrollbars */
  overflow: auto; /* Show scrollbars only when needed */
}

Overflow: Visible (Default)

Content overflows the container and is visible:

.box {
  width: 200px;
  height: 100px;
  overflow: visible; /* Default */
}
/* Content exceeding dimensions will overflow */

Overflow: Hidden

Content is clipped and hidden:

.box {
  width: 200px;
  height: 100px;
  overflow: hidden; /* Clips excess content */
}

Use cases:

Hiding overflowing content
Creating image containers
Clearfix for floats
Cropping content

Overflow: Scroll

Always shows scrollbars:

.box {
  width: 200px;
  height: 100px;
  overflow: scroll; /* Always shows scrollbars */
}

Overflow: Auto

Shows scrollbars only when content overflows:

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* Scrollbars appear when needed */
}

Recommended

Use overflow: auto instead of scroll for better UX - scrollbars only appear when necessary.

Directional Overflow

Control overflow separately for x and y axes:

.element {
  overflow-x: hidden; /* Horizontal overflow */
  overflow-y: auto; /* Vertical overflow */
}

/* Shorthand */
.element {
  overflow: hidden auto; /* x y */
}

Practical Examples

Scrollable Content Area

<!DOCTYPE html>
<html>
  <head>
    <style>
      .scroll-box {
        width: 300px;
        height: 200px;
        overflow: auto;
        border: 1px solid #ddd;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="scroll-box">
      <h3>Scrollable Content</h3>
      <p>Long content that exceeds the container height...</p>
      <p>More content...</p>
      <p>Even more content...</p>
    </div>
  </body>
</html>

Image Cropping

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  /* Image is cropped if taller than container */
}

Horizontal Scroll

.horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.horizontal-scroll-item {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
}

Card with Text Truncation

.card {
  width: 300px;
}

.card-description {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

Overflow with Text

Text Overflow

Combines with text-overflow for ellipsis:

.truncate {
  width: 200px;
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show ... */
}

Multi-line Ellipsis

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Clearfix Pattern

Classic clearfix using overflow:

.clearfix {
  overflow: auto;
  /* or */
  overflow: hidden;
}

/* Alternative modern clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Scroll Behavior

Control scroll behavior with scroll-behavior:

html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

Custom Scrollbars

Style scrollbars (WebKit browsers):

.custom-scroll::-webkit-scrollbar {
  width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Overflow with Flexbox/Grid

/* Flex container with scrolling */
.flex-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}

.flex-scroll-item {
  flex: 0 0 auto;
  width: 200px;
}

Common Patterns

.modal {
  max-height: 80vh;
  overflow-y: auto;
}

.sidebar {
  height: 100vh;
  overflow-y: auto;
}

Code Block

.code-block {
  overflow-x: auto;
  white-space: pre;
  padding: 1rem;
  background: #f5f5f5;
}

Table Wrapper

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  min-width: 600px;
}

Best Practices

Overflow Best Practices

Use overflow: auto instead of scroll for better UX - Always test overflow behavior with varying content - Use overflow: hidden sparingly - it can hide important content - Consider mobile users when implementing horizontal scroll - Provide visual indicators for scrollable content - Ensure keyboard navigation works with overflow: hidden - Test with different viewport sizes - Use overflow-wrap or word-break with overflow for text - Consider accessibility when hiding content

Accessibility

Hidden content with overflow: hidden is still accessible to screen readers
Use visibility: hidden or display: none if you want to hide from screen readers too
Ensure scrollable regions are keyboard accessible
Provide focus indicators for scrollable areas
Consider touch targets for mobile scrolling

Common Issues

Issue: Content cut off unexpectedly

/* Problem */
.parent {
  overflow: hidden;
}

.child {
  position: absolute; /* Can overflow */
}

/* Solution: Use overflow: visible on parent or adjust positioning */

Issue: Horizontal scroll on mobile

/* Problem: Elements wider than viewport */
.wide-element {
  width: 1200px;
}

/* Solution */
.wide-element {
  max-width: 100%;
  overflow-x: auto;
}

Understanding overflow is crucial for managing content layout and creating good user experiences!

CSS Overflow

On this page

CSS Overflow

On this page