Overflow property in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to hide content that overflows the box.

CSS

div {
  width: 10rem;
  height: 5rem;
  overflow: [1];
  border: 1px solid black;
}

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

Ahidden

Bvisible

Cscroll

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' which shows overflow content.

Using 'scroll' which adds scrollbars instead of hiding.

The hidden value hides any content that goes outside the box.

2fill in blank

medium

Complete the code to add scrollbars only when needed.

CSS

div {
  width: 12rem;
  height: 6rem;
  overflow: [1];
  border: 1px solid gray;
}

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

Ahidden

Bauto

Cvisible

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scroll' which always shows scrollbars.

Using 'hidden' which hides overflow without scrollbars.

The auto value adds scrollbars only if content is too big.

3fill in blank

hard

Fix the error in the code to make overflow content scrollable.

CSS

section {
  width: 15rem;
  height: 7rem;
  overflow: [1];
  border: 2px solid blue;
}

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

Ahidden

Bvisible

Cscroll

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' which hides overflow content.

Using 'visible' which shows overflow outside the box.

The scroll value always shows scrollbars to access overflow content.

4fill in blank

hard

Fill both blanks to create a box that clips overflow and adds vertical scroll only.

CSS

div {
  width: 14rem;
  height: 8rem;
  overflow-x: [1];
  overflow-y: [2];
  border: 1px solid black;
}

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

Ahidden

Bscroll

Cvisible

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' for overflow-x which shows overflow.

Using 'auto' for overflow-y which shows scrollbars only if needed.

Setting overflow-x to hidden clips horizontal overflow.
Setting overflow-y to scroll always shows vertical scrollbars.

5fill in blank

hard

Fill all three blanks to create a scrollable box with clipped horizontal overflow and automatic vertical scroll.

CSS

section {
  width: 16rem;
  height: 9rem;
  overflow: [1];
  overflow-x: [2];
  overflow-y: [3];
  border: 2px solid green;
}

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

Avisible

Bauto

Chidden

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scroll' for overflow-x which shows horizontal scrollbars.

Using 'hidden' for overflow-y which hides vertical overflow.

Set overflow-x to hidden to clip horizontal overflow.
Set overflow-y to auto to add vertical scrollbars only if needed.
Setting overflow to visible is overridden by the axis-specific properties but included here for completeness.