Overflow handling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container hide overflowing content horizontally.

Tailwind

<div class="w-64 h-32 bg-blue-200 [1]">
  <p>This text is very long and will overflow the container width.</p>
</div>

Drag options to blanks, or click blank then click option'

Aoverflow-x-hidden

Boverflow-visible

Coverflow-scroll

Doverflow-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using overflow-visible which shows overflow instead of hiding it.

Using overflow-scroll which adds scrollbars instead of hiding overflow.

The class overflow-x-hidden hides any content that overflows horizontally, preventing scrollbars or visible overflow.

2fill in blank

medium

Complete the code to allow vertical scrolling when content overflows vertically.

Tailwind

<div class="h-40 w-48 border border-gray-400 [1]">
  <p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</p>
</div>

Drag options to blanks, or click blank then click option'

Aoverflow-hidden

Boverflow-visible

Coverflow-y-scroll

Doverflow-x-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using overflow-x-auto which controls horizontal overflow, not vertical.

Using overflow-hidden which hides overflow instead of allowing scroll.

The class overflow-y-scroll adds a vertical scrollbar when content exceeds the container height.

3fill in blank

hard

Fix the error in the code to prevent any overflow from showing outside the container.

Tailwind

<div class="w-48 h-24 border border-black [1]">
  <img src="https://via.placeholder.com/150" alt="Placeholder image">
</div>

Drag options to blanks, or click blank then click option'

Aoverflow-hidden

Boverflow-auto

Coverflow-visible

Doverflow-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using overflow-visible which allows overflow to show outside.

Using overflow-auto which adds scrollbars instead of hiding overflow.

The class overflow-hidden ensures that any content that exceeds the container's size is clipped and not visible outside.

4fill in blank

hard

Fill both blanks to create a container that scrolls horizontally and hides vertical overflow.

Tailwind

<div class="w-64 h-24 border border-gray-600 [1] [2]">
  <div class="w-96 bg-green-300">Wide content that overflows horizontally</div>
</div>

Drag options to blanks, or click blank then click option'

Aoverflow-x-scroll

Boverflow-y-hidden

Coverflow-auto

Doverflow-visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using overflow-auto which controls both directions and may add unwanted scrollbars.

Using overflow-visible which shows overflow instead of hiding or scrolling.

Using overflow-x-scroll enables horizontal scrolling, while overflow-y-hidden hides vertical overflow.

5fill in blank

hard

Fill the blanks to create a scrollable container horizontally with hidden vertical overflow.

Tailwind

<div class="w-56 h-28 border border-blue-500 [1] [2]">
  <div class="w-96 h-40 bg-yellow-300">Scrollable wide content</div>
</div>

Drag options to blanks, or click blank then click option'

Aoverflow-x-auto

Boverflow-y-hidden

Coverflow-visible

Doverflow-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using overflow-scroll which forces scrollbars always.

Using overflow-hidden which hides all overflow, including horizontal.

overflow-x-auto allows horizontal scrolling when needed, overflow-y-hidden hides vertical overflow.