Overflow property in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does overflow: hidden; do?

You have a box with content that is bigger than the box size. What happens when you apply overflow: hidden; to the box?

CSS

<style>
.box {
  width: 10rem;
  height: 5rem;
  border: 1px solid black;
  overflow: hidden;
}
</style>
<div class="box">This text is very long and will not fit inside the box.</div>

A The extra content outside the box is cut off and not visible.

B The box expands to fit all the content inside.

C The extra content is shown with a scrollbar inside the box.

D The extra content is visible outside the box without any clipping.

💡 Hint

Think about what happens when you want to hide anything that doesn't fit inside a container.

overflow: hidden; hides any content that goes outside the container's size. It clips the content so you only see what fits inside.

📝 Syntax

intermediate

Which CSS rule correctly adds a vertical scrollbar when content overflows?

You want a box to show a vertical scrollbar only if the content is taller than the box. Which CSS overflow property value should you use?

CSS

.box {
  width: 12rem;
  height: 6rem;
  border: 1px solid black;
  overflow-y: ???;
}

A hidden

B scroll

C auto

D visible

💡 Hint

You want the scrollbar only when needed, not always visible.

overflow-y: auto; shows a vertical scrollbar only if the content is too tall. scroll always shows it, hidden hides overflow, and visible shows overflow outside the box.

❓ rendering

advanced

What will you see with overflow: visible; on a fixed-size box?

Consider this HTML and CSS. What is the visible result in the browser?

CSS

<style>
.container {
  width: 8rem;
  height: 4rem;
  border: 2px solid blue;
  overflow: visible;
}
</style>
<div class="container">
  <p>This text is very long and will overflow outside the box.</p>
</div>

A The text is clipped and only visible inside the blue border.

B The text overflows outside the blue border and is fully visible.

C A scrollbar appears inside the box to scroll the text.

D The box expands to fit the entire text inside.

💡 Hint

Think about what happens when overflow is set to visible by default.

overflow: visible; means content can spill outside the container. The blue border stays fixed, but the text flows outside and remains visible.

❓ selector

advanced

Which CSS selector targets only elements with overflow set to scroll?

You want to style only elements that have overflow: scroll; applied. Which selector will work?

A :overflow(scroll)

B .scrollable

C [overflow='scroll']

D [style*='overflow: scroll']

💡 Hint

Think about how to select elements by inline style attribute content.

Only [style*='overflow: scroll'] selects elements with inline styles containing overflow: scroll. Other options are invalid or select by class or non-existent attribute.

❓ accessibility

expert

How to ensure keyboard users can scroll overflow content?

You have a box with overflow: auto; and scrollbars. What should you do to make sure keyboard users can scroll the content easily?

A Add <code>tabindex="0"</code> to the box so it can receive keyboard focus.

B Add <code>aria-hidden="true"</code> to hide the box from screen readers.

C Use <code>overflow: hidden;</code> to prevent scrolling.

D Remove all focus styles to avoid distraction.

💡 Hint

Think about how keyboard users navigate and interact with scrollable areas.

Adding tabindex="0" makes the box focusable by keyboard. Then users can scroll using keyboard keys. Hiding it or removing focus styles harms accessibility.

Practice

1. What does the CSS overflow property control in a webpage layout?

easy

A. How extra content inside a box is shown or hidden

B. The color of the text inside a box

C. The size of the box border

D. The font style of the text

Solution

1. Step 1: Understand the role of overflow

   The overflow property manages what happens when content is bigger than its container.

2. Step 2: Match property to behavior

   It controls if extra content is visible, hidden, or scrollable inside the box.

3. Final Answer:

   How extra content inside a box is shown or hidden -> Option A

4. Quick Check:

   Overflow controls extra content display [OK]

Hint: Overflow controls extra content visibility inside boxes [OK]

Common Mistakes:

• Confusing overflow with text color or font
• Thinking overflow changes box size
• Mixing overflow with border styles

2. Which of the following is the correct CSS syntax to hide overflow content inside a box?

easy

A. overflow = hidden;

B. overflow: hidden;

C. overflow; hidden;

D. overflow-hidden;

Solution

1. Step 1: Recall CSS property syntax

   CSS uses property: value; format to set styles.

2. Step 2: Identify correct syntax for overflow hidden

   The correct way is overflow: hidden; with colon and semicolon.

3. Final Answer:

   overflow: hidden; -> Option B

4. Quick Check:

   CSS uses colon between property and value [OK]

Hint: Remember CSS uses colon between property and value [OK]

Common Mistakes:

• Using equals sign instead of colon
• Missing colon or semicolon
• Combining property and value without separator

3. Given this CSS and HTML, what will you see in the browser?

<style>
.box {
  width: 100px;
  height: 50px;
  overflow: scroll;
  border: 1px solid black;
}
</style>
<div class='box'>This is a very long text that will not fit inside the box.</div>

medium

A. The text is cut off and hidden without scrollbars

B. The text is fully visible without scrollbars

C. The box shows scrollbars to see hidden text

D. The box expands to fit all text

Solution

1. Step 1: Analyze box size and overflow setting

   The box is fixed at 100px by 50px with overflow: scroll;.

2. Step 2: Understand overflow: scroll behavior

   This forces scrollbars to appear so user can scroll to see all content.

3. Final Answer:

   The box shows scrollbars to see hidden text -> Option C

4. Quick Check:

   Overflow scroll adds scrollbars [OK]

Hint: Overflow scroll always shows scrollbars [OK]

Common Mistakes:

• Thinking overflow scroll hides content
• Assuming box grows to fit text
• Confusing scroll with auto behavior

4. You want to hide extra content inside a fixed-size box but your CSS uses overflow: visible;. What is the problem and how to fix it?

medium

A. Visible overflow hides content; change to scroll to show scrollbars

B. Visible overflow makes box invisible; use auto instead

C. Visible overflow causes syntax error; fix by adding semicolon

D. Visible overflow shows extra content; change to hidden to hide it

Solution

1. Step 1: Understand overflow: visible behavior

   Overflow visible means extra content spills outside the box and is shown.

2. Step 2: Fix by changing overflow to hidden

   To hide extra content, use overflow: hidden; which clips content inside the box.

3. Final Answer:

   Visible overflow shows extra content; change to hidden to hide it -> Option D

4. Quick Check:

   Visible shows overflow, hidden hides it [OK]

Hint: Visible shows overflow; hidden hides it [OK]

Common Mistakes:

• Thinking visible hides content
• Confusing visible with scroll or auto
• Assuming visible causes errors

5. You have a container with dynamic content that sometimes fits and sometimes overflows. You want scrollbars only when needed. Which overflow value should you use and why?

hard

A. overflow: auto; because it shows scrollbars only when content overflows

B. overflow: visible; because it always shows all content

C. overflow: hidden; because it hides all overflow content

D. overflow: scroll; because it never shows scrollbars

Solution

1. Step 1: Understand dynamic content overflow needs

   Content size changes, so scrollbars should appear only if needed.

2. Step 2: Choose overflow: auto for conditional scrollbars

   auto adds scrollbars only when content is too big, keeping layout clean otherwise.

3. Final Answer:

   overflow: auto; because it shows scrollbars only when content overflows -> Option A

4. Quick Check:

   Auto adds scrollbars only if needed [OK]

Hint: Use overflow auto for scrollbars only when needed [OK]

Common Mistakes:

• Using scroll which always shows scrollbars
• Using visible which never hides overflow
• Using hidden which hides overflow without scroll