Loading...

CSS Overflow

You can give a box a fixed size. What if the content is taller or wider than that box? overflow decides whether the extra content spills out, gets clipped, or becomes scrollable.

Keywords at a glance

📊 Common overflow values

Value Everyday meaning
visible (default) Extra content can spill outside the box
hidden Extra content is clipped; no scrollbars
scroll Scrollbars are shown (often even if not needed)
auto Scrollbars appear only when content overflows

Default: content can spill

With overflow: visible (the default), long content may paint outside the box edges.

Visible overflow (default)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Clip with hidden

overflow: hidden cuts off anything that does not fit. Useful for clean edges — but users cannot scroll to the rest.

Hidden clips the spill

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Always show scrollbars with scroll

overflow: scroll makes the box scrollable and typically reserves scrollbar space even when content fits.

Scroll always

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — scroll only when needed

overflow: auto is a calm everyday choice for panels: scrollbars appear when content overflows, and often stay out of the way when it does not.

Auto when needed

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Control one axis

Use overflow-x and overflow-y when horizontal and vertical behavior should differ — for example, allow vertical scroll but clip sideways spill.

Vertical scroll, horizontal clip

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

A practical panel habit

Give the box a real height (or max-height), then choose auto for readable, scrollable content areas.

Scrollable note panel

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

Try it yourself

  1. Make a box with width and a short height, then paste several paragraphs inside.
  2. Switch overflow among visible, hidden, scroll, and auto.
  3. Set overflow-x: hidden and overflow-y: auto on a wide line of text.
  4. Build .note-panel with max-height and watch scrollbars appear only when needed.
  5. Notice that without a height (or max-height) limit, overflow often has nothing to constrain.

Common mistakes

  • Expecting overflow effects without a constrained height or width
  • Using scroll everywhere when auto would feel calmer
  • Confusing overflow (box spill) with text-overflow (ellipsis on text — a later tool)
  • Clipping with hidden and forgetting users may need a way to reach the rest
  • Assuming overflow changes box-sizing math (it does not)

Summary

  • Overflow controls spill, clip, and scroll when content is larger than its box
  • Default is visible; hidden clips; scroll always offers bars; auto when needed
  • A constrained size (height / max-height / width) is usually required to see the effect
  • overflow-x and overflow-y split the axes
  • For many panels, overflow: auto is a calm habit

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial