• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top