Display & Positioning›Extra· 25 min read
Overflow
Decide what happens when content is too big for its box — clip it, scroll it, or let it spill.
What you will learn
- Control overflow with visible, hidden, scroll, auto
- Make a scrollable area
- Handle overflow on one axis
The overflow values
| Value | Effect |
|---|---|
visible | Default — content spills out |
hidden | Extra content is clipped |
scroll | Always shows scrollbars |
auto | Scrollbars only when needed |
<style>
.box { height: 90px; width: 260px; border:1px solid #e6e8f0; border-radius:8px; padding:10px; }
.scroll { overflow: auto; }
</style>
<div class="box scroll">
This box has a fixed height. When the text is longer than the box, overflow: auto
adds a scrollbar so you can read it all. Try scrolling inside me. More text, more text,
more and more and more text to overflow.
</div>Live preview
The box has a fixed height: 90px, so the long text does not fit. Without any overflow setting the text would spill out and look broken. overflow: auto tells the browser: “if the content is too tall, add a scrollbar so the user can scroll to read the rest”. Because it is auto, the scrollbar only appears when it is actually needed — if the text were short, there would be no scrollbar at all.
Note: You can control one direction with overflow-x (horizontal) and overflow-y (vertical). For example a wide table can scroll sideways with overflow-x: auto.
Q. Which value adds scrollbars ONLY when content overflows?
Answer: overflow: auto shows scrollbars only when needed. scroll always shows them; hidden clips; visible spills.
✍️ Practice
- Make a fixed-height box that scrolls when its text is too long.
- Wrap a wide table in a div with
overflow-x: autoso it scrolls sideways on mobile.
🏠 Homework
- Add a scrollable testimonials box to your landing page.