CSS Tutorial
CSS Overflow
visible, hidden, scroll, and auto. Overflow is how you clip or scroll extra content.
When content does not fit
A box has a size. Content can be taller or wider than that size. overflow decides what happens to the extra: paint it anyway, clip it, or offer a scrollbar.
The default is visible. A long Harbor studio note can spill out of a short card. That is often fine for headings. It is a problem for a caption, a code snippet, or a tide list you meant to keep inside a frame.
hidden clips
overflow: hidden cuts anything that crosses the padding edge. No scrollbar. Use it for a rounded card, a single-line title, or a thumbnail crop. Do not use it if the reader still needs the clipped words.
Example
<style>
.clip {
width: 14rem;
height: 4.2rem;
overflow: hidden;
padding: 0.75rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0f766e;
}
</style>
<p class="clip">
Harbor studio keeps a long notice on the lantern desk: hours 8–16, sky gallery tours at 10:30, and
Slip 4 closing with the last tide. This box hides the rest.
</p>Hidden overflow also clips focus rings and sticky children. If a keyboard user cannot see the focused control, switch to auto or grow the box.
scroll versus auto
scroll always shows a scrollbar gutter (on platforms that have one), even when content fits. auto shows a scrollbar only when something overflows. Prefer auto for most studio panels.
Example
<style>
.panel {
width: 16rem;
height: 6rem;
overflow: auto;
padding: 0.5rem 0.75rem;
background: #ccfbf1;
border: 2px solid teal;
color: #0f766e;
}
.panel h2 {
margin: 0 0 0.35rem;
color: teal;
font-size: 1rem;
}
</style>
<div class="panel">
<h2>Tide board</h2>
<p>08:00 North quay open.</p>
<p>10:30 Sky gallery.</p>
<p>13:00 Lantern desk.</p>
<p>16:00 Slip 4 last call.</p>
</div>One axis at a time
overflow-x and overflow-y split the job. A wide berth map might scroll sideways and clip vertically. If one axis is visible and the other is not, the visible axis is computed as auto — you cannot mix visible with hidden the way a sketch might suggest.
Example
<style>
.map {
width: 12rem;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 0.75rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0369a1;
}
</style>
<p class="map">North quay — Slip 4 — Slip 7 — Sky gallery — Lantern desk — Teal dock — Harbor studio</p>Open /css/try and switch overflow among visible,hidden, and auto. The tide board is the fastest way to feel the difference.
Values at a glance
| Value | Extra content | Scrollbar |
|---|---|---|
visible | Paints outside the box | No |
hidden | Clipped | No |
clip | Clipped, no programmatic scroll | No |
scroll | Inside the box | Usually always |
auto | Inside the box if needed | When it overflows |
Related: Max Width so the box rarely overflows in the first place, andPosition if sticky content disappears inside a hidden parent.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Statistics
A marks list that scrolls
hidden clips. auto adds a bar when needed. scroll always shows a bar on some systems. visible is the default leak.
A 64 px menu of four names is a widget. Do not clip a table of 200 rows without a real scroll region and a caption that still explains the data.
Example
<style>
.list { height: 64px; overflow: auto; background: #e0f2fe; }
</style>
<div class="list">
<p>Ada 72</p><p>Ben 81</p><p>Cara 64</p><p>Dee 90</p>
</div>Biology
Clip a long note
overflow: hidden on a 48 px box is a teaser. Offer a details element or a “read more” if the clipped text is medical advice, not a decoration.
Example
<style>
.clip { width: 160px; height: 48px; overflow: hidden; background: #fef3c7; }
</style>
<div class="clip">Resting pulse 72 bpm counted as 18 beats in 15 seconds times four.</div>