Part 12: Overflow, Scrolling & Overscroll Behavior

The overflow property controls what happens when content exceeds the boundaries of its container element.

1. Overflow Utilities

• overflow-auto: Shows scrollbars only when content overflows.
• overflow-hidden: Clips content that spills outside boundaries (crucial for rounded corners on cards containing images).
• overflow-scroll: Always shows scrollbars.
• overflow-x-auto: Horizontal scrolling only (perfect for tables and code blocks on mobile).

2. Responsive Code Block with Horizontal Scroll

<pre class="overflow-x-auto p-4 bg-slate-900 text-slate-100 rounded-lg text-sm">
  <code>const express = require('express'); const app = express(); app.listen(3000);</code>
</pre>

3. Preventing Card Border Radius Bleed

When an image is inside a rounded card, the image's square corners will bleed outside unless overflow-hidden is applied:

<div class="rounded-2xl overflow-hidden shadow-lg border">
  <img src="/banner.jpg" class="w-full h-48 object-cover" alt="Banner" />
  <div class="p-4">
    <h3>Article Title</h3>
  </div>
</div>

Key Takeaways

• Use overflow-x-auto on code blocks and data tables to make them scrollable on mobile.
• Use overflow-hidden on parent containers with rounded-* to clip child images cleanly.

In Part 13, we will explore Object-Fit and Object-Position for Responsive Media!