Overflow Handling - Learn

Overflow Handling

5 patterns

Scroll containers, text truncation, responsive tables, and preventing horizontal overflow on mobile. You'll hit this when a table or long URL causes horizontal scrolling on mobile.

Text truncation in flex containers

easy

Avoid

.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Prefer

.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-item-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-item-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Why avoid

Without min-width: 0, the label's min-width: auto prevents it from shrinking. The text overflows the flex container instead of truncating with an ellipsis. This is the #1 flex truncation gotcha.

Why prefer

Flex items default to min-width: auto, which prevents them from shrinking below their content width. Adding min-width: 0 allows the element to shrink, letting text-overflow: ellipsis actually work.

CSS-Tricks: Flexbox truncated text

Responsive table with horizontal scroll

easy

Avoid

/* Table overflows the page on mobile */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

/* Table overflows the page on mobile */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

Prefer

.table-wrapper {
  overflow-x: auto;

}

.data-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.table-wrapper {
  overflow-x: auto;

}

.data-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

Why avoid

A width: 100% table on a 320px screen compresses columns until text wraps uncontrollably. Without a scroll wrapper, the table either overflows the page (causing a full-page horizontal scrollbar) or becomes illegible.

Why prefer

Wrapping the table in a scroll container with overflow-x: auto lets the table maintain its readable layout while scrolling horizontally on small screens. min-width ensures columns don't compress to unreadable widths.

MDN: overflow-x

Long words and URLs breaking layout

medium

Avoid

.comment {
  max-width: 600px;
}

/* Long URLs break out of the container */

.comment {
  max-width: 600px;
}

/* Long URLs break out of the container */

Prefer

.comment {
  max-width: 600px;
  overflow-wrap: break-word;
}

.comment {
  max-width: 600px;
  overflow-wrap: break-word;
}

Why avoid

User-generated content often contains long URLs, file paths, or words without spaces. Without overflow-wrap: break-word, these strings overflow their container and cause a horizontal scrollbar on the entire page.

Why prefer

overflow-wrap: break-word breaks long unbreakable strings (URLs, long words, base64) only when they would overflow their container. Normal text wraps at natural word boundaries; the forced break is a last resort. This prevents horizontal overflow from user-generated content.

MDN: overflow-wrap

Preventing code blocks from overflowing

medium

Avoid

pre {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Code blocks overflow on mobile */

pre {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Code blocks overflow on mobile */

Prefer

pre {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  white-space: pre;

}

pre {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  white-space: pre;

}

Why avoid

Without overflow-x: auto, code blocks with long lines push the entire page layout wider. On mobile, this creates a full-page horizontal scrollbar, which is one of the most common responsive design bugs.

Why prefer

overflow-x: auto adds a horizontal scrollbar only when the code exceeds the container width. white-space: pre preserves code formatting (indentation, line breaks) while allowing horizontal scroll for long lines.

MDN: white-space

Nested scroll containers

hard

Avoid

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

.modal-body {
  overflow-y: auto;
  max-height: 400px;
}

/* Two nested scrollbars confuse users */

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

.modal-body {
  overflow-y: auto;
  max-height: 400px;
}

/* Two nested scrollbars confuse users */

Prefer

.modal {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header { flex-shrink: 0; }

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal-footer { flex-shrink: 0; }

.modal {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header { flex-shrink: 0; }

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal-footer { flex-shrink: 0; }

Why avoid

Nested scroll containers create two independent scrollbars. Users don't know which region they're scrolling, and on touch devices the wrong scroll container often captures the gesture. One scroll context is always clearer.

Why prefer

A flex column layout with min-height: 0 on the body lets the body scroll while header and footer stay fixed. Only one scrollbar exists. The key is min-height: 0 because without it, the flex child won't shrink below its content height.

MDN: Flex item minimum size

Responsive Spacing

Breakpoint Hooks