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.