CSS Academy · Lesson

Overflow: Scroll Clip and Auto

Control what happens when content exceeds its container using overflow properties.

Overflow: Scroll Clip and Auto is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is Overflow?

Overflow occurs when an element's content is larger than its defined dimensions. The overflow property controls what happens to this excess content.

overflow: visible (Default)

By default content overflows and is visible outside the element's box. This can cause content to overlap sibling elements or escape the viewport.

.box {
  width: 100px;
  height: 50px;
  overflow: visible; /* default — content spills out */
}

overflow: hidden

overflow: hidden clips any content that extends beyond the element's bounds. The clipped content is not accessible or scrollable.

.cropped {
  width: 200px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px; /* clips child images to rounded corners */
}

overflow: scroll

overflow: scroll always shows scrollbars — even when content fits. Use this when you want consistent UI regardless of content size.

.code-block {
  overflow: scroll;
  max-height: 300px;
  font-family: monospace;
}

overflow: auto

overflow: auto only shows scrollbars when content actually overflows. This is usually preferred over scroll to avoid unnecessary scrollbar gutters.

.sidebar {
  overflow: auto;
  max-height: 600px;
}

overflow: clip

overflow: clip is like hidden but more aggressive: it does not create a block formatting context and cannot be scrolled by JavaScript. Ideal for performance-safe clipping.

.clipped {
  overflow: clip;
}

overflow-x and overflow-y

Control each axis independently. A common pattern allows horizontal scrolling for wide content like code or tables:

.table-container {
  overflow-x: auto;
  overflow-y: hidden;
}

Scrollable Container Pattern

To create a scrollable container, you need both a fixed height and overflow: auto or scroll:

.chat-messages {
  height: 400px;
  overflow-y: auto;
  padding: 16px;
}

Block Formatting Context from overflow

Setting overflow to any value other than visible creates a block formatting context (BFC). This contains internal floats and prevents margin collapse from escaping the container.

Scroll Chaining

When a scrollable container is scrolled to its limit, scroll events can "chain" to the parent. Use overscroll-behavior: contain to prevent this.

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

text-overflow vs overflow

text-overflow: ellipsis is about text inside an element and requires overflow: hidden + white-space: nowrap to work. overflow controls the element's own overflow behavior.

Quick Check

Which overflow value shows scrollbars only when the content actually overflows?

Recap

overflow: hidden clips content. overflow: auto adds scrollbars only when needed (preferred). overflow: scroll always shows scrollbars. overflow: clip clips without creating a new formatting context. Use overflow-x/y for per-axis control.

Frequently asked questions

Is the “Overflow: Scroll Clip and Auto” lesson free?

Yes — the full text of “Overflow: Scroll Clip and Auto” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Overflow: Scroll Clip and Auto”?

Control what happens when content exceeds its container using overflow properties. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Overflow: Scroll Clip and Auto” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy