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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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.
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hidden clips any content that extends beyond the element's bounds. The clipped content is not accessible or scrollable.
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scroll always shows scrollbars — even when content fits. Use this when you want consistent UI regardless of content size.
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: auto only shows scrollbars when content actually overflows. This is usually preferred over scroll to avoid unnecessary scrollbar gutters.
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
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.
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x and overflow-y
Control each axis independently. A common pattern allows horizontal scrolling for wide content like code or tables:
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
Scrollable Container Pattern
To create a scrollable container, you need both a fixed height and overflow: auto or scroll:
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
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.
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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
- Block vs Inline vs Inline-Block
- Visibility vs Display None
- Overflow: Scroll Clip and Auto
- CSS Reset and Normalize