Overflow handling in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding overflow-x behavior in Tailwind CSS

What will happen if you apply overflow-x-auto to a container with content wider than the container's width?

Tailwind

<div class="w-48 overflow-x-auto border border-gray-400">
  <div class="w-96 bg-blue-200">Wide content inside</div>
</div>

A The container will show a horizontal scrollbar allowing you to scroll the wide content.

B The content will be clipped and hidden without any scrollbar.

C The container will expand to fit the wide content, ignoring the fixed width.

D The content will wrap to fit inside the container width automatically.

💡 Hint

Think about what overflow-x-auto does when content is wider than its container.

The overflow-x-auto class adds a horizontal scrollbar only when the content overflows the container's width. This allows horizontal scrolling without clipping or expanding the container.

📝 Syntax

intermediate

Which Tailwind class correctly hides overflow content on both axes?

You want to hide any content that overflows the container horizontally and vertically. Which Tailwind CSS class should you use?

A overflow-x-hidden

B overflow-hidden

C overflow-y-auto

D overflow-scroll

💡 Hint

Consider which class affects both horizontal and vertical overflow.

The overflow-hidden class hides overflow on both the x (horizontal) and y (vertical) axes. The others affect only one axis or add scrollbars.

❓ rendering

advanced

Visual effect of overflow-y-scroll on a fixed height container

Given this container with fixed height and overflow-y-scroll, what will you see in the browser?

Tailwind

<div class="h-24 overflow-y-scroll border border-gray-500">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
  <p>Line 6</p>
</div>

A Content clipped with no scrollbar visible.

B All lines visible without scrollbar because content fits inside height.

C A fixed height box with vertical scrollbar allowing scrolling through all lines.

D Horizontal scrollbar visible because of overflow-y-scroll.

💡 Hint

Think about what overflow-y-scroll does when content height exceeds container height.

The overflow-y-scroll class always shows a vertical scrollbar, letting you scroll through content that exceeds the container's fixed height.

❓ selector

advanced

Which Tailwind class combination prevents horizontal overflow but allows vertical scrolling?

You want to prevent horizontal overflow but allow vertical scrolling if content is tall. Which combination of Tailwind classes achieves this?

A overflow-scroll overflow-x-hidden

B overflow-x-auto overflow-y-hidden

C overflow-hidden overflow-y-scroll

D overflow-x-hidden overflow-y-auto

💡 Hint

Consider which classes control overflow on each axis separately.

overflow-x-hidden hides horizontal overflow, while overflow-y-auto adds vertical scrollbar only if needed. This combination prevents horizontal scroll but allows vertical scrolling.

❓ accessibility

expert

Ensuring accessible scrollable regions with Tailwind overflow classes

When creating a scrollable container using Tailwind's overflow classes, what should you do to ensure keyboard users can navigate the scrollable content?

Tailwind

<div class="h-40 overflow-auto border p-2">
  <!-- long content here -->
</div>

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

B No extra attributes needed; overflow classes handle accessibility automatically.

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

D Use <code>role="presentation"</code> on the container to improve keyboard navigation.

💡 Hint

Think about how keyboard users can focus and scroll inside a div.

Adding tabindex="0" makes the scrollable container focusable by keyboard users, allowing them to scroll using keyboard keys. Overflow classes alone do not provide keyboard focus.