• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Overflow

← Previous Next →

🔹 What is overflow in CSS?

In CSS, the overflow property specifies what should happen if the content of an element overflows its defined area (e.g., if content is too large to fit in a box).

Sometimes content inside an element grows beyond its width or height. To handle this, we use overflow to decide whether:

  • It should be visible

  • Hidden

  • Scrollable

  • Or handled automatically

🔸 Syntax

selector {
  overflow: value;
}

Possible values:

  • visible (default)

  • hidden

  • scroll

  • auto

🔸 Value: visible (Default)

This is the default behavior. Content that overflows will still be visible outside the container.

🔹 Example:
<div class="visible-box">
  This is some very long content that will overflow its box but will still be visible outside.
</div>

.visible-box {
  width: 200px;
  height: 50px;
  overflow: visible;
  border: 1px solid black;
}

🟢 The content overflows and sticks out beyond the box.

🔸 Value: hidden

This value clips the overflowing content and makes it invisible. Scrollbars are not added.

🔹 Example:
<div class="hidden-box">
  This is long content that will be cut off.
</div>

.hidden-box {
  width: 200px;
  height: 50px;
  overflow: hidden;
  border: 1px solid red;
}

🟢 Any content that doesn’t fit within the 200×50 box will be hidden.

🔸 Value: scroll

This value adds scrollbars always, regardless of whether the content overflows or not.

🔹 Example:
<div class="scroll-box">
  This content is scrollable even if it doesn't overflow!
</div>

.scroll-box {
  width: 200px;
  height: 50px;
  overflow: scroll;
  border: 1px solid blue;
}

🟢 Scrollbars will always appear, even if not needed.

🔸 Value: auto

This value automatically adds scrollbars only when needed.

🔹 Example:
<div class="auto-box">
  This content will show scrollbars only if it overflows the box.
</div>

.auto-box {
  width: 200px;
  height: 50px;
  overflow: auto;
  border: 1px solid green;
}

🟢 Scrollbars appear only when content is larger than the box.

🔸 Overflow in One Direction Only

You can also control overflow separately for horizontal and vertical directions using:

  • overflow-x

  • overflow-y

🔹 Example:
.div1 {
  overflow-x: scroll; /* horizontal scroll only */
  overflow-y: hidden; /* vertical overflow hidden */
}

🔸 Example: Horizontal Scrollable Menu

<div class="scroll-menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

.scroll-menu {
  white-space: nowrap;
  overflow-x: auto;
  border: 1px solid #ccc;
  width: 300px;
}
.scroll-menu a {
  display: inline-block;
  padding: 10px;
}

🟢 This creates a horizontal scroll menu.

🟠 Common Use Cases

  1. Creating scrollable boxes

  2. Hiding overflowing content

  3. Adding horizontal scrolling

  4. Responsive card layouts

  5. Avoiding layout breaking due to long text

Practice Questions

Q1. Create a box with overflow: hidden.

Q2. Allow vertical scroll and hide horizontal scroll.

Q3. Create a box that always shows scrollbars.

Q4. Create a box where scrollbars appear only when needed.

Q5. Hide overflow text from a div with fixed width.

Q6. Make an image scrollable inside a container.

Q7. Prevent horizontal overflow using overflow-x.

Q8. Create a horizontal menu that scrolls.

Q9. Hide overflow and round the corners.

Q10. Combine white-space: nowrap and overflow-x: auto.

CSS Overflow Quiz

Q1: What is the default value of overflow?

A. hidden
B. scroll
C. visible
D. auto

Q2: Which value hides the content that overflows?

A. visible
B. hidden
C. scroll
D. auto

Q3: Which overflow value adds scrollbars only when needed?

A. scroll
B. auto
C. hidden
D. visible

Q4: Which property is used to control horizontal overflow only?

A. overflow-right
B. overflow-x
C. scroll-x
D. hidden-x

Q5: What will overflow: scroll do?

A. Always show scrollbars
B. Hide the content
C. Adjust size
D. Shrink text

Q6: What happens when you use overflow: visible?

A. Content spills outside the box
B. Content gets clipped
C. Scrollbars show
D. Text wraps

Q7: How to create a horizontally scrollable row?

A. white-space: wrap
B. white-space: nowrap + overflow-x: auto
C. overflow-y: auto
D. display: flex

Q8: Which overflow value works best for responsive boxes?

A. auto
B. hidden
C. scroll
D. fixed

Q9: How to ensure vertical scrolling only?

A. overflow-y: scroll; overflow-x: hidden;
B. overflow: auto
C. overflow-x: auto
D. white-space: nowrap

Q10: What does overflow-x: hidden do?

A. Adds horizontal scroll
B. Prevents horizontal overflow
C. Closes box
D. Adds padding
← Previous Next →
Login
Go Back Top