CSS Overflow Practice Questions with Solutions

By /

Introduction

The CSS overflow property controls what happens when content is larger than its container. You can allow the content to remain visible, hide the extra content, add scrollbars, or automatically display scrollbars only when needed. Understanding overflow is important for designing cards, text boxes, tables, image galleries, and responsive layouts. In this chapter, you’ll practice the overflow property through simple solved questions that are easy for beginners to understand. CSS Overflow practice questions with solutions help to understand the concepts.

Question 1: Display Overflowing Content

Problem Statement

Write CSS to allow overflowing content to remain visible outside its container.

CSS Code

div {
    width: 200px;
    height: 100px;
    overflow: visible;
}

Output

Content that is larger than the container extends outside the box and remains visible.

Explanation

  • overflow: visible; is the default value.
  • Extra content is not clipped.
  • The content can extend beyond the container’s boundaries.

Question 2: Hide Overflowing Content

Problem Statement

Write CSS to hide any content that exceeds the size of a container.

CSS Code

div {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

Output

Only the content that fits inside the container is visible. The remaining content is hidden.

Explanation

  • overflow: hidden; clips the extra content.
  • No scrollbars are displayed.
  • It is commonly used for image cards and sliders.

Question 3: Add Scrollbars to a Container

Problem Statement

Write CSS to always display scrollbars when content is larger than the container.

CSS Code

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Output

The container displays horizontal and vertical scrollbars, allowing users to view all content.

Explanation

  • overflow: scroll; always shows scrollbars.
  • Users can scroll to view hidden content.
  • Scrollbars appear even if there is little or no overflow.

Question 4: Display Scrollbars Only When Needed

Problem Statement

Write CSS to display scrollbars only if the content is larger than the container.

CSS Code

div {
    width: 200px;
    height: 100px;
    overflow: auto;
}

Output

Scrollbars appear only when the content exceeds the container size.

Explanation

  • overflow: auto; automatically manages scrollbars.
  • Scrollbars appear only when required.
  • This is the most commonly used overflow value.

Question 5: Control Horizontal Overflow

Problem Statement

Write CSS to enable horizontal scrolling when content is wider than its container.

CSS Code

div {
    overflow-x: scroll;
}

Output

A horizontal scrollbar appears when the content is wider than the container.

Explanation

  • overflow-x controls horizontal overflow.
  • scroll allows users to scroll sideways.
  • It is useful for wide tables and code blocks.

Question 6: Control Vertical Overflow

Problem Statement

Write CSS to enable vertical scrolling when the content becomes taller than its container.

CSS Code

div {
    overflow-y: scroll;
}

Output

A vertical scrollbar appears, allowing users to scroll through the hidden content.

Explanation

  • overflow-y controls vertical overflow.
  • scroll always displays a vertical scrollbar.
  • This property is useful for chat boxes and long text sections.

Question 7: Hide Only Horizontal Overflow

Problem Statement

Write CSS to hide overflowing content only on the horizontal axis.

CSS Code

div {
    overflow-x: hidden;
}

Output

Any content that exceeds the container’s width is hidden, while vertical overflow remains unaffected.

Explanation

  • overflow-x controls horizontal overflow.
  • hidden clips content that extends beyond the container’s width.
  • This helps prevent unwanted horizontal scrolling.

Question 8: Automatically Scroll Vertically

Problem Statement

Write CSS to display a vertical scrollbar only when needed.

CSS Code

div {
    overflow-y: auto;
}

Output

A vertical scrollbar appears only if the content becomes taller than the container.

Explanation

  • overflow-y controls vertical overflow.
  • auto adds a scrollbar only when necessary.
  • This creates a cleaner user interface.

Question 9: Create a Scrollable Text Box

Problem Statement

Write CSS to create a text box with a fixed height and a vertical scrollbar.

CSS Code

div {
    height: 150px;
    overflow-y: auto;
}

Output

The text box has a fixed height, and a vertical scrollbar appears when the content is too long.

Explanation

  • height sets the box height.
  • overflow-y: auto; keeps the box height fixed while allowing users to scroll through extra content.
  • This is commonly used for terms and conditions, comments, and descriptions.

Question 10: Create a Scrollable Image Gallery

Problem Statement

Write CSS to create an image gallery with horizontal scrolling.

CSS Code

.gallery {
    overflow-x: auto;
    white-space: nowrap;
}

Output

The image gallery displays a horizontal scrollbar when the images exceed the container’s width.

Explanation

  • overflow-x: auto; enables horizontal scrolling when needed.
  • white-space: nowrap; keeps all images on a single line.
  • This technique is commonly used for product galleries and photo sliders.

Key Takeaways

  • overflow controls what happens when content exceeds its container.
  • visible allows content to extend outside the container.
  • hidden clips extra content.
  • scroll always displays scrollbars.
  • auto displays scrollbars only when necessary.
  • overflow-x controls horizontal overflow.
  • overflow-y controls vertical overflow.
  • overflow: auto; is the most commonly used option for responsive layouts.

Frequently Asked Questions (FAQs)

1. What is the CSS overflow property?

The overflow property controls how content is displayed when it is larger than its container.

2. What is the difference between hidden and scroll?

  • hidden hides the extra content.
  • scroll displays scrollbars so users can access the hidden content.

3. What does overflow: auto; do?

overflow: auto; displays scrollbars only when the content is larger than the container.

4. What is the difference between overflow-x and overflow-y?

  • overflow-x controls horizontal overflow.
  • overflow-y controls vertical overflow.

5. When should I use overflow: hidden;?

Use overflow: hidden; when you want to prevent extra content from appearing outside its container, such as in image cards or sliders.

6. Why is overflow-x: auto; useful?

It allows users to scroll horizontally only when content is wider than the container, making it ideal for tables, code snippets, and image galleries.

7. Which overflow value is most commonly used?

overflow: auto; is the most commonly used value because it keeps the layout clean and shows scrollbars only when they are needed.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top